Question

当我们使用BottomNavigationBar导航到Flutter中的不同页面时，有状态页面似乎无法重建自身。

这意味着我们不能像抽屉那样使用BottomNavigationBar触发重建有状态的小部件。状态保持不变，BottomNavigationBar在页面上滑动，无助于重新构建整个页面。

int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
  Page1(),
  Page2(),
  Page3(),
];

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('BottomNavigationBar Sample'),
    ),
    body: _widgetOptions.elementAt(_selectedIndex),
    ),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          title: Text('Business'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          title: Text('School'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    ),
  );
}

这里的小部件Page1()，Page2()，Page3()是有状态的小部件，当通过底部导航栏进行导航时，它们似乎无法重建自身。有什么办法可以做到吗？

Answer 1

代替

static const List<Widget> _widgetOptions = <Widget>[
  Page1(),
  Page2(),
  Page3(),
];

使用

Widget _widgetOptions(int index) {
  switch (index) {
    case 0:
      return Page1();
      break;
    case 1:
      return Page2();
      break;
    case 2:
      return Page3();
      break;
  }
  return Page1();
}

还要替换

body: _widgetOptions.elementAt(_selectedIndex),

使用

body: _widgetOptions(_selectedIndex),

如何使用Flutter中的底部导航栏触发有状态的小部件以通过导航自身进行重建？

1 个答案: