颤动计时器仅更新秒小部件
颤动计时器仅更新秒小部件
提问于 2019-03-01 02:31:45
我学习了一个制作秒表的Flutter教程。
应用程序构建并运行，但是我无法让它更新小部件的小时(HRS)和分钟(MIN)部分。它只更新秒数(秒)。
我尝试过移动代码片段并进行调试，但最终我只是破坏了整个代码，所以它根本不会运行。
这是我想说的截图：
下面是应用程序：
import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new TimerAppState();
}
}
class TimerAppState extends State<MyApp> {
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(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Timer'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomTextContainer(label: 'HRS', value: hours.toString().padLeft(2, '0')),
CustomTextContainer(label: 'MIN', value: minutes.toString().padLeft(2, '0')),
CustomTextContainer(label: 'SEC', value: seconds.toString().padLeft(2, '0')),
],
),
Container(
margin:EdgeInsets.only(top: 20),
child:RaisedButton(
child: Text(isActive ? 'STOP' : 'START'),
onPressed: () {
setState(() {
isActive = !isActive;
});
},
),
),
],
),
),
)
);
}
}
class CustomTextContainer extends StatelessWidget {
CustomTextContainer({this.label, this.value});
final String label;
final String value;
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
padding: EdgeInsets.all(20),
decoration: new BoxDecoration(
borderRadius: new BorderRadius.circular(10),
color: Colors.black87,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'$value',
style: TextStyle(
color: Colors.white,
fontSize: 34,
fontWeight: FontWeight.bold
),
),
Text(
'$label',
style: TextStyle(
color: Colors.white70,
),
)
],
),
);
}
}有没有办法让它正常工作？
谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-01 04:35:11
您必须在setState方法中添加所有更新的值，而不仅仅是秒
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new TimerAppState();
}
}
class TimerAppState extends State<MyApp> {
static const duration = const Duration(seconds: 1);
int secondsPassed = 0;
bool isActive = false;
Timer timer;
int seconds, minutes, hours;
@override
void initState() {
super.initState();
if (timer == null)
timer = Timer.periodic(duration, (Timer t) {
handleTick();
});
}
void handleTick() {
if (isActive) {
setState(() {
secondsPassed = secondsPassed + 1;
seconds = secondsPassed * 60;
minutes = secondsPassed ~/ 60;
hours = secondsPassed ~/ (60 * 60);
});
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Timer'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomTextContainer(
label: 'HRS', value: hours.toString().padLeft(2, '0')),
CustomTextContainer(
label: 'MIN',
value: minutes.toString().padLeft(2, '0')),
CustomTextContainer(
label: 'SEC',
value: seconds.toString().padLeft(2, '0')),
],
),
Container(
margin: EdgeInsets.only(top: 20),
child: RaisedButton(
child: Text(isActive ? 'STOP' : 'START'),
onPressed: () {
setState(() {
isActive = !isActive;
});
},
),
),
],
),
),
));
}
}
class CustomTextContainer extends StatelessWidget {
CustomTextContainer({this.label, this.value});
final String label;
final String value;
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
padding: EdgeInsets.all(20),
decoration: new BoxDecoration(
borderRadius: new BorderRadius.circular(10),
color: Colors.black87,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'$value',
style: TextStyle(
color: Colors.white, fontSize: 34, fontWeight: FontWeight.bold),
),
Text(
'$label',
style: TextStyle(
color: Colors.white70,
),
)
],
),
);
}
}Stack Overflow用户
发布于 2020-11-04 03:38:27
使用某些模数%
int seconds = secondsPassed % 60;
int minutes = secondsPassed ~/ 60 % 60;
int hours = secondsPassed ~/ (60 * 60) % 24;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54932106
复制相关文章
相似问题
腾讯云开发者
