Flutter - 底部导航 - 如何重建页面？

Posted 2023-02-23

【中文标题】Flutter - 底部导航 - 如何重建页面？

【英文标题】：Flutter - Bottom Navigation - How to make page rebuild?

【发布时间】：2020-07-18 18:58:02

【问题描述】：

我有一个包含三个页面的应用程序，用户可以使用底部导航栏进行导航。尽管如此，我希望在用户返回时重建三个页面之一（因此：删除当前状态并从头开始重新渲染）。

我的导航代码如下。

三页选项：

static List<Widget> _widgetOptions = <Widget>[
    PostFeed(),
    Profile(),
    HabitList(),
  ];

在页面选项之间切换（稍后在底部导航中）：

 void _onItemTapped(int index) 
    setState(() 
      _selectedIndex = index;
    );
  

在脚手架上：

body: _widgetOptions.elementAt(_selectedIndex),
bottomNavigationBar: BottomNavigationBar(
  items: [
  BottomNavigationBarItem(
    icon: Icon(Icons.home),
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.person),
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.list),
  ),
],
currentIndex: _selectedIndex,
  onTap: _onItemTapped,
),

使用此代码，当我在它们之间切换时，所有页面的状态都保持不变。当用户点击特定的底部导航图标时，我现在只想动态加载一个（PostFeed）。

现在有人怎么做吗？

非常感谢！

【问题讨论】：

我建议阅读这篇文章以更好地了解底部导航栏：medium.com/@meysam.mahfouzi/…

【参考方案1】：

我希望我能理解你的问题。我在自己的应用程序中有以下实现，这会重建 _showPage(int index) 函数中调用不同页面的页面（QuestionPage、OwnQuestionPage 和 ProfilPage）。

    class OpinionPage extends StatefulWidget 
  @override
  _OpinionPageState createState() => _OpinionPageState();


class _OpinionPageState extends State<OpinionPage> 
  int currentPageNumber;
  final List<Widget> pages = [
    QuestionPage(),
    OwnQuestionPage(),
    ProfilPage(),
  ];
  Widget currentPage = QuestionPage();
  final PageStorageBucket bucket = PageStorageBucket();

  @override
  void initState() 
    currentPageNumber = 0;
    SystemSettings.allowOnlyPortraitOrientation();
    super.initState();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: PageStorage(bucket: bucket, child: currentPage),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.question_answer, color: currentPageNumber == 0 ? primaryBlue : Colors.grey),
            title: Text(
              'Fragen',
              style: TextStyle(color: currentPageNumber == 0 ? primaryBlue : Colors.grey),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add_circle, color: currentPageNumber == 1 ? primaryBlue : Colors.grey),
            title: Text(
              'Meine Fragen',
              style: TextStyle(color: currentPageNumber == 1 ? primaryBlue : Colors.grey),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person, color: currentPageNumber == 2 ? primaryBlue : Colors.grey),
            title: Text(
              'Profil',
              style: TextStyle(color: currentPageNumber == 2 ? primaryBlue : Colors.grey),
            ),
          ),
        ],
        onTap: (int index) => _showPage(index),
      ),
    );
  

  void _showPage(int index) 
    setState(() 
      switch (index) 
        case 0:
          currentPage = QuestionPage();
          currentPageNumber = 0;
          break;
        case 1:
          currentPage = OwnQuestionPage();
          currentPageNumber = 1;
          break;
        case 2:
          currentPage = ProfilPage();
          currentPageNumber = 2;
          break;
      
    );
  

【讨论】：

您好，谢谢您的回答。不幸的是，我用你的代码得到了同样的结果。

@NicolasO 不要使用 IndexedStack 小部件。