Flutter ValueNotifier 倒计时 局部刷新组件 在StatelessWidget 中刷新倒计时
2023-09-27 14:27:35 时间
class ContentItem extends StatelessWidget {
Timer _timer;
ValueNotifier<int> _timerValueNotifier = ValueNotifier(-1);
构造方法中初始化timer
ContentItem(
{this.age
)
: super(key: key) {
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
if (_timerValueNotifier == 0) {
_timer.cancel();
} else {
_timerValueNotifier.value -= 1;
}
});
-=1代表 _timerValueNotifier 的局部刷新
使用到的地方
_timerValueNotifier.value = hour;
return ValueListenableBuilder(
valueListenable: _timerValueNotifier,
builder: (BuildContext context, int value, Widget child) {
//todo
String timeText = value.toString();
return _getTextByNomal(timeText);
});
首先赋值给他要倒计时的时间 赋值后 可以通过value拿到当前的倒计时
在控件销毁的时候要注意关闭Timer
关闭方法需要在StatelessWidget中重写 createElement控件
class ContentItem extends StatelessWidget {
@override
StatelessElement createElement() =>
StatelessElementDestoryTimer(this, _timer);
传入Timer并进行注销
class StatelessElementDestoryTimer extends StatelessElement {
final Timer timer;
StatelessElementDestoryTimer(StatelessWidget widget, this.timer)
: super(widget);
@override
void unmount() {
super.unmount();
if (timer != null) {
timer.cancel();
}
}
}
相关文章
- flutter系列之:永远不用担心组件溢出的Wrap
- flutter系列之:Material主题的基础-MaterialApp
- Flutter NavigationBar 优雅的实现底部导航栏菜单
- Flutter IntrinsicHeight 自适应组件大小
- Flutter LayoutBuilder 用来获取父布局的尺寸大小
- Flutter视频播放、Flutter VideoPlayer 视频播放组件精要
- Flutter SwitchListTile 开关组件使用详情
- Flutter AnimatedSwitcher 动画切换组件的基本使用
- Flutter实现倒计时功能
- Flutter 使用Android Studio 创建第一个应用
- 重识Flutter 非常用Slivers组件速览 - part3
- Flutter 组件之可以缩放和平移的 Flutter 无限画布(教程含源码)
- Flutter 基础组件之 Text文本组件使用大全(教程含源码)
- Flutter 教程之 轮播图组件实现滚动视觉差(教程含源码)
- Flutter macOS开发教程之 界面布局与UI组件源码(教程含源码)
- Flutter 平移动画 — 4种实现方式
- Flutter Widget - Image 图片
- 毕业设计 基于Flutter的聊天社交应用
- flutter系列之:永远不用担心组件溢出的Wrap
- flutter - 将数字转换为科学记数法并获得指数 flutter
- 在Flutter中解析复杂的JSON(一篇顶十篇)