目前，我已经编写了用于编写带有两个按钮的计数器应用程序的代码。 1个凸起的按钮用于重置，而一个fab按钮则用于增量计数器。
是否可以添加倒数计时器以在FAB按钮上实施？当FAB按钮单击时，将启动20秒倒数计时器。
此外，我在以下线程中找到了相同类型的功能实现。但是我没有在我的应用程序中放置代码的地方来实现FAB按钮的倒计时工作。
How to make a countdown in flutter?
import 'package:flutter/material.dart';
import 'dart:ui';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Counter App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Counter App'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
int _counter = 0;
AnimationController controller;
bool _isButtonDisabled;
Duration get duration => controller.duration * controller.value;
bool get expired => duration.inSeconds == 0;
@override
void initState() {
controller = AnimationController(
vsync: this,
duration: Duration(seconds: 20),
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'number $_counter added',
),
AnimatedBuilder(
animation: controller,
builder: (BuildContext context, Widget child) {
return new Text(
'${duration.inSeconds}',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 50.0,
),
);
}),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new RaisedButton(
padding: const EdgeInsets.all(15.0),
textColor: Colors.white,
color: Colors.redAccent,
onPressed: () {
setState(() {
controller.reset();
_counter = 0;
});
},
child: new Text("Reset"),
),
new RaisedButton(
onPressed: () => setState(() {
controller.reverse(from: 1);
}),
textColor: Colors.white,
color: Colors.purple,
padding: const EdgeInsets.all(15.0),
child: new Text(
"Start",
),
),
],
),
],
),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 50.0,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
_counter++;
}),
tooltip: 'Increment Counter',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
答案 0 :(得分：0)
尝试以下操作：
import 'package:flutter/material.dart';
import 'dart:ui';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Counter App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Counter App'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
int _counter = 0;
AnimationController controller;
Duration get duration => controller.duration * controller.value;
bool get expired => duration.inSeconds == 0;
@override
void initState() {
controller = AnimationController(
vsync: this,
duration: Duration(seconds: 20),
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedBuilder(
animation: controller,
builder: (BuildContext context, Widget child) {
return new Text(
'${duration.inSeconds}',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 50.0,
),
);
}),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new RaisedButton(
padding: const EdgeInsets.all(15.0),
textColor: Colors.white,
color: Colors.redAccent,
onPressed: () {
setState(() {
controller.reset();
});
},
child: new Text("Reset"),
),
],
),
],
),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 50.0,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
controller.reverse(from: 1);
}),
tooltip: 'Increment Counter',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
答案 1 :(得分：0)
您可以在任何地方使用此代码。
.sub-nav {
background-color: #fff;
font-size: 1.4rem;
font-weight: 400;
position: relative;
z-index: 10;
margin-bottom: 1.2rem;
margin-top: -3.8rem;
list-style: none;
box-shadow: $shadow-light;
display: flex;
align-items: center;
justify-content: space-between;
&__item {
padding: 1.4rem 3rem;
border-bottom: 3px solid transparent;
cursor: pointer;
&:hover {
border-color: $color-blue;
span {
color: $color-blue;
}
svg {
border-bottom: 3px solid $color-blue;
}
}
}
&__link {
border-bottom: 3px solid transparent;
text-transform: uppercase;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
}
&__icon {
width: 1.8rem;
height: 1.8rem;
margin-bottom: .3rem;
}
}