【开发经验】Flutter组件的事件传递与数据控制

最新推荐文章于 2024-04-17 15:57:58 发布

2401_84046635

最新推荐文章于 2024-04-17 15:57:58 发布

阅读量1k

点赞数 13

分类专栏：程序员文章标签： flutter php 开发语言

本文链接：https://blog.csdn.net/2401_84046635/article/details/137217084

版权

文章探讨了如何在Flutter中使用StatefulWidget进行动态数据管理，如倒计时和网络请求，强调了State在处理动画和数据更新的重要性。还介绍了如何通过ValueNotifier和Controller进行事件传递，以及避免在业务逻辑中互相调用State的方法的最佳实践。

摘要由CSDN通过智能技术生成

描述：一个Widget自己改变自己的值
实现功能：倒计时，从网络加载数据

这也是一个常见的需求，但是很多新手写到这里就不会写了，可能会错误的去使用FutureBuilder进行网络请求，会造成每次都反复请求，实际上这里是必须使用StatefulWidget的state来储存请求返回信息的。

一般项目中，动画，倒计时，异步请求此类功能需要使用state，其他大多数的功能并不需要存在state。

例如这个widget,会显示一个数字：

class _CounterText extends StatelessWidget {
final int count;

const _CounterText({Key key, this.count}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Text(‘$count’),
);
}
}

可以试着让widget从服务器加载这个数字：

class _CounterText extends StatefulWidget {
const _CounterText({Key key}) : super(key: key);

@override
__CounterTextState createState() => __CounterTextState();
}

class __CounterTextState extends State<_CounterText> {
@override
void initState() {
// 在initState中发出请求
_fetchData();
super.initState();
}

// 在数据加载之前，显示0
int count = 0;

// 加载数据,模拟一个异步,请求后刷新
Future _fetchData() async {
await Future.delayed(Duration(seconds: 1));
setState(() {
count = 10;
});
}

@override
Widget build(BuildContext context) {
return Center(
child: Text(‘$count’),
);
}
}

又或者，我们想让这个数字每秒都减1，最小到0。那么只需要把他变成stateful后，在initState中初始化一个timer，让数字减小：

class _CounterText extends StatefulWidget {
final int initCount;

const _CounterText({Key key, this.initCount:10}) : super(key: key);

@override
__CounterTextState createState() => __CounterTextState();
}

class __CounterTextState extends State<_CounterText> {
Timer _timer;

int count = 0;

@override
void initState() {
count = widget.initCount;
_timer = Timer.periodic(
Duration(seconds: 1),
(timer) {
if (count > 0) {
setState(() {
count–;
});
}
},
);
super.initState();
}

@override
void dispose() {
_timer?.cancel();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Center(
child: Text(‘${widget.initCount}’),
);
}
}

这样我们就能看到这个widget从输入的数字每秒减少1。

由此可见，widget可以在state