Flutter 四种方式实现页面切换后保持原页面状态

最新推荐文章于 2024-06-26 21:22:49 发布

丶咿呀咿呀

最新推荐文章于 2024-06-26 21:22:49 发布

阅读量2.6k

点赞数

分类专栏： flutter 文章标签： flutter tabbview pageview

本文链接：https://blog.csdn.net/qq_32687703/article/details/95645331

版权

本文探讨了在Flutter应用中，如何在页面切换后保持原页面状态，避免重复初始化。文章介绍了IndexedStack、Offstage、PageView+AutomaticKeepAliveClientMixin和TabBarView四种方法，并分析了它们的优缺点。使用这些技术可以提升用户体验并减少不必要的资源消耗。

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

前言：
在 Flutter 应用中，导航栏切换页面后默认情况下会丢失原页面状态，即每次进入页面时都会重新初始化状态，不仅增加额外开销，而且体验差。

使用IndexedStack实现

IndexedStack继承自Stack，它的作用是显示第index个child，其它child在页面上是不可见的，但所有child的状态都被保持，所以这个Widget可以实现我们的需求，我们只需要将现在的body用IndexedStack包裹一层即可

class MainDart extends StatefulWidget {

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

class _MainDartState extends State<MainDart> with TickerProviderStateMixin{

  //默认索引
  int positionIndex = 0;
  //底部导航栏
  var mainTitles = ['患者诊疗', '收费','物资', '设置'];
  var indexStack;
  List<BottomNavigationBarItem> navigationViews;

  @override
  Widget build(BuildContext context) {
    initData();
    return Scaffold(
      appBar: PreferredSize(
        preferredSize:Size.fromHeight(MediaQuery.of(context).size.height * 0.07),
        child:SafeArea(
          top: true,
          child: Offstage(),
        ),
      ),
      body: indexStack,
      bottomNavigationBar: initNavigationBar(),
    );
  }
  @override
  void initState() {
    super.initState();
    navigationViews = <BottomNavigationBarItem>[
      new BottomNavigationBarItem(
        icon: const Icon(Icons.home),
        title: new Text(mainTitles[0]),
        backgroundColor: Colors.black,
      ),
      new BottomNavigationBarItem(
        icon: const Icon(Icons.assignment),
        title: new Text(mainTitles[1]),
        backgroundColor: Colors.black,
      ),
      new BottomNavigationBarItem(
        icon: const Icon(Icons.devices_other),
        title: new Text(mainTitles[2]),
        backgroundColor: Colors.black,
      ),
      new BottomNavigat