延迟后如何更改物料按钮的状态

Question

我有一个表情符号列表，[🤑, 👏, 👏🏻, 👏🏼, 👏🏽, 👏🏾, 👏🏿, 😍, 🥰, 😘, 😙, 😚, 🤗, 😻]，我还有一个没有图标关联的按钮。请参阅此材质按钮。

MaterialButton(
onPressed: () {},

child: Text("",textScaleFactor: 2),
shape: CircleBorder(),
padding: EdgeInsets.all(16),
),

现在，我需要在这个按钮内显示上面的列表，延迟1秒后的[🤑, 👏, 👏🏻, 👏🏼, 👏🏽, 👏🏾, 👏🏿, 😍, 🥰, 😘, 😙, 😚, 🤗, 😻]。

Answer 1

您也可以使用Future。

MaterialButton(
onPressed: () async {
await Future<void>.delayed(Duration(seconds: 1));
// your function
},
child: Text('', textScaleFactor: 2),
shape: CircleBorder(),
padding: EdgeInsets.all(16),
),

Answer 2

您可以使用Timer.periodical来实现这一点。请参阅此示例代码

链接到文档

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Timer emojiTimer;
@override
void initState() {
emojiTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
changeEmoji();
});
super.initState();
}
int randomInt = 0;
Future<void> changeEmoji() async {
setState(() {
var ran = Random();
randomInt = ran.nextInt(emojiList.length);
});
}
var emojiList = [
"🤑",
"👏",
" 👏🏻",
"👏🏼",
" 👏🏽",
" 👏🏾",
"👏🏿",
"😍",
"🥰",
"😘",
"😙",
"😚",
"🤗",
"😻"
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Text('hello there'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
emojiTimer.cancel();
},
child: Text(emojiList[randomInt]),
),
);
}
}