Flutter 中 IndexedStack 的使用详解 _ Flutter Widgets

最新推荐文章于 2024-05-29 22:38:22 发布

面试题开源

最新推荐文章于 2024-05-29 22:38:22 发布

阅读量755

点赞数 8

分类专栏：程序员文章标签： flutter 前端 javascript

本文链接：https://blog.csdn.net/m0_58397045/article/details/137031205

版权

本文详细介绍了在 Flutter 中使用 IndexedStack 创建底部导航切换页面的效果，并探讨了优化 IndexedStack 性能的方法，包括分析了Widget重建的原因，提供了解决方案。

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

主体内容

我们先开始主体部分的布局，这里使用 IndexedStack ，添加一个 currentIndex 来记录当前子项索引，当我们改变 currentIndex 值后刷新即可实现切换页面效果啦。

/// IndexedStack 页面
class IndexedStackPage extends StatefulWidget {
IndexedStackPage({Key? key}) : super(key: key);

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

class _IndexedStackPageState extends State {
// 当前子项索引
int currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘IndexedStack - ZeroFlutter’),
),
body: IndexedStack(
alignment: Alignment.center,
// 设置当前索引
index: currentIndex,
children: [
PageDetails(title: ‘首页’),
PageDetails(title: ‘消息’),
PageDetails(title: ‘我的’),
],
),
bottomNavigationBar: [下面聊到],