flutter - 返回页面后恢复 AnimationController 状态
问题描述
我正在尝试保留倒数计时器的状态(下面给出示例),以便当我导航到倒数计时器页面时,开始倒计时,比如说在 10,然后暂停它,比如说在 7,然后导航离开计时器和返回,计时器显示 7,暂停时间,与 10 的初始状态。
在此处未显示的单独代码中,我尝试使用 PageStorageBucket + PageStorage 来存储 AnimationController,并在 InitState 中恢复它,但这不起作用。
离开/返回到它所在的页面后,恢复动画控制器状态的最佳方法是什么?
import 'package:flutter/material.dart';
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> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
color: Colors.blue,
child: Text("AnimatonController"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Counter()),
);
},
),
],
),
),
);
}
}
class CounterText extends AnimatedWidget {
CounterText({Key key, this.animation})
: super(key: key, listenable: animation);
Animation<int> animation;
@override
build(BuildContext context) {
return new Text(
animation.value.toString(),
style: new TextStyle(fontSize: 200.0),
);
}
}
class Counter extends StatefulWidget {
State createState() => new _CounterState();
}
class _CounterState extends State<Counter> with TickerProviderStateMixin {
AnimationController _controller;
static const int startCount = 10;
@override
void initState() {
super.initState();
_controller = new AnimationController(
vsync: this,
duration: new Duration(seconds: startCount),
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
floatingActionButton: new FloatingActionButton(
child: Icon(_controller.isAnimating ? Icons.pause : Icons.play_arrow),
onPressed: () {
setState(() {
_controller.isAnimating
? _controller.stop()
: _controller.forward();
});
}),
body: new Container(
child: new Center(
child: new CounterText(
animation: new StepTween(
begin: startCount,
end: 0,
).animate(_controller),
),
),
),
);
}
}
解决方案
保留控制器状态的一种方法是使用Provider。
创建一个类来存储您的控制器状态,例如,
class CounterStateModel {
AnimationController _controller;
int startCount = 10;
}
将您的应用程序包装在提供程序中
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provider<CounterStateModel>(
builder: (context) => CounterStateModel(),
child: MaterialApp(
title: 'Flutter Demo',
然后在您的 _CounterState 类中,使用此提供程序来保存/检索您的控制器
@override
Widget build(BuildContext context) {
CounterStateModel _counterStateModel = Provider.of<CounterStateModel>(context);
if (_counterStateModel._controller == null) {
_counterStateModel._controller = new AnimationController(
vsync: this,
duration: new Duration(seconds: _counterStateModel.startCount),
);
_counterStateModel._controller = _controller;
} else {
_controller = _counterStateModel._controller;
}
return new Scaffold(
完整代码在这里
推荐阅读
- flutter - 颤振:小部件的边缘与第二个小部件重叠
- java - Team City 构建失败:-source 1.6 不支持钻石运算符
- python - 类中的包罗万象的方法,将所有未知函数传递给类中的实例
- javascript - 角度守卫我如何从 auth.service.ts 获得价值(用户登录与否)
- vue.js - 如果 v-model 为空,VueJS 将第一个单选按钮设置为选中
- sas - 如何解释对数指数非线性回归?
- java - @Focus 多次调用 - Eclipse e4
- python - (python-telegram-bot)AttributeError:“更新”对象没有属性“机器人”
- intellij-idea - 无法运行程序“java”(在目录“/home/user/corda/build/nodes/Notary”中):错误=2,没有这样的文件或目录
- javascript - 被点击
- 里面作为孩子的项目
- 使用 React 的父级
- 里面作为孩子的项目