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

最新推荐文章于 2024-07-17 15:44:31 发布

egrhef

最新推荐文章于 2024-07-17 15:44:31 发布

阅读量1k

点赞数 23

分类专栏：程序员文章标签： flutter windows 网络

本文链接：https://blog.csdn.net/egrhef/article/details/137933866

版权

本文详细介绍了如何在Flutter中使用StatefulWidget管理Widget的状态，包括使用State类处理数据变化、动画控制（如计数器递减和位置动画），以及推荐避免ListView管理自身state，提倡使用Scaffold和Stateful组件进行数据管理。还讨论了单例模式在全局数据和事件管理中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

}

可以试着让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中改变数据，这样我们在使用StatefulWidget时，只需要给其初始数据，widget会根据生命周期加载或改变数据。

在这里，我建议的用法是在Scaffold中加载数据，每个页面都由一个Stateful的Scaffold和若干StatelessWidget组成，由Scaffold的State管理所有数据，再刷新即可。

注意，即使这个页面的body是ListView，也不推荐ListView管理自己的state，在当前state维护数据的list即可。使用ListView.builder构建列表即可避免更新数组时，在页面上刷新列表的全部元素，保持高性能刷新。