【Flutter教程】从零构建电商应用（一） (2)

现在到了app最不可或缺的部分了：状态。状态将持有timer的当前值和运行标识。我
补充了一个TimerState类，它负责维护状态，同时构建widget树。

class Timer extends StatefulWidget { @override State<StatefulWidget> createState() { return new TimerState(); } } class TimerState extends State<Timer> { int secondsPassed = 0; bool isActive = false; @override Widget build(BuildContext context) { // Return Widget Tree } }

按钮用来切换timer的运行或者停止：

RaisedButton( child: Text(isActive ? 'STOP' : 'START'), onPressed: () { setState(() { isActive = !isActive; }); }, )

Dart有个用于异步操作的优雅的模块。我们可以使用其Timer类来实现读秒。修改后的TimerAppState代码如下，注意我们已经重构Timer类并改名为TimerApp以避免与异步模块中的Timer类混淆：

class TimerAppState extends State<TimerApp> { static const duration = const Duration(seconds:1); int secondsPassed = 0; bool isActive = false; Timer timer; void handleTick() { if (isActive) { setState(() { secondsPassed = secondsPassed + 1; }); } } @override Widget build(BuildContext context) { if (timer == null) timer = Timer.periodic(duration, (Timer t) { handleTick(); }); int seconds = secondsPassed % 60; int minutes = secondsPassed ~/ 60; int hours = secondsPassed ~/ (60*60); return MaterialApp(...) } }

好了，我们已经完成了第一个Flutter应用，完整的Dard代码可以在这里下载。

原文链接：【Flutter教程】从零构建电商应用（一）]()