如何在颤动中维护页面的状态

Posted 2023-02-23

【中文标题】如何在颤动中维护页面的状态

【英文标题】：How to maintain state of a page in flutter

【发布时间】：2021-10-17 18:29:21

【问题描述】：

我的应用程序有一个抽屉，在其中，我根据整数更改页面（以跟踪索引），而不是通过从一个页面导航到另一个页面。我尝试使用 AuthomaticKeepAlive，但它确实在那里工作。有没有其他办法？

【问题讨论】：

添加一些代码和更多细节总是更好。见How do I ask a good question

【参考方案1】：

您可以使用有状态小部件轻松实现此目的

import 'package:flutter/material.dart';

class SimpleDrawerPage extends StatefulWidget 
  const SimpleDrawerPage(Key? key) : super(key: key);

  @override
  _SimpleDrawerPageState createState() => _SimpleDrawerPageState();


class _SimpleDrawerPageState extends State<SimpleDrawerPage> 
  final pagesMenu = ["Home", "Settings"];
  int pageIndex = 0;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(),
      body: Builder(builder: (context) 
        switch (pageIndex) 
          case 1:
            return SettingsPage();
          // case 2:
          //   return SecondPage();
          // case 3:
          //   return ThirdPage();
          default:
            // here we use [default] for [index 0] ;
            return HomePage();
        
      ),
      drawer: Drawer(
          child: ListView.builder(
              itemCount: pagesMenu.length,
              itemBuilder: (context, index) => ListTile(
                    title: Text(pagesMenu.elementAt(index)),
                    tileColor: index == pageIndex ? Colors.teal : null,
                    onTap: () 
                      setState(() 
                        pageIndex = index;
                      );
                    ,
                  ))),
    );
  


class HomePage extends StatelessWidget 
  const HomePage(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Container(child: Center(child: Text('HomePage')));
  


class SettingsPage extends StatelessWidget 
  const SettingsPage(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Container(child: Center(child: Text('SettingsPage')));
  

【讨论】：

不，我的意思是第一次渲染的屏幕的实际状态。我不希望它在第一次加载时调用初始化状态。

【参考方案2】：

我从另一个问题得到了答案

有两种方法可以做到这一点 第一种方法 第一种方法是在子页面顶部使用页面浏览小部件并使用 pageview 控制器更改页面索引。显然你必须使用 AutomaticKeepAliveStateMixin 来维护页面的状态以保持状态 第二种方法 另一种简单方便的方法是使用 indexedStack 小部件并为其提供一组子（页面）和当前页面索引。它只是将其所有子项保存在堆栈中，并且不会丢失其状态。