bottomNavigationBar如何通过ontab在flutter中重建同一页面？

在Flutter中，bottomNavigationBar是一个常用的组件，用于创建底部导航栏。通过ontab属性，可以在用户切换底部导航栏的选项卡时重新构建同一页面。

要实现这个功能，可以按照以下步骤进行操作：

首先，在Flutter中创建一个StatefulWidget，用于构建底部导航栏和对应的页面内容。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  List<Widget> _pages = [
    Page1(),
    Page2(),
    Page3(),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar'),
      ),
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onTabTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Page 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Page 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'Page 3',
          ),
        ],
      ),
    );
  }
}

在上述代码中，_selectedIndex变量用于跟踪当前选中的底部导航栏选项卡的索引。_pages列表包含了对应的页面内容，可以根据需要进行修改。
_onTabTapped方法是一个回调函数，用于在用户切换底部导航栏选项卡时更新_selectedIndex的值，并触发页面重建。
在build方法中，将_selectedIndex作为索引来获取对应的页面内容，并将其作为body属性的值传递给Scaffold组件。
bottomNavigationBar属性接受一个BottomNavigationBar组件，其中currentIndex属性设置为_selectedIndex，onTap属性设置为_onTabTapped方法，items属性定义了底部导航栏的选项卡。

通过以上步骤，就可以实现在Flutter中通过ontab在同一页面上重建bottomNavigationBar的功能。根据具体需求，可以在_pages列表中添加更多的页面，并在BottomNavigationBarItem中设置对应的图标和标签。

腾讯云相关产品和产品介绍链接地址：