Flutter tabBar如何从顶部更改为底部

Question

我在Dart Flutter中很新。

我遇到这个问题，我遵循创建标签栏的指南，但最重要的是，我想要实现的是具有选项卡在底部而不是顶部。

我已经尝试过BottomNavigationBar并进行全部更改，但没有起作用，并且崩溃了所有应用程序。

[请帮助我，谢谢

child: Scaffold(
    body: DefaultTabController(
      length: 5,
      initialIndex: 2,
      child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            backgroundColor: primaryColor,
            automaticallyImplyLeading: false,
            title: TabBar(

                labelColor: Colors.white,
                indicatorColor: Colors.white,
                unselectedLabelColor: Colors.black,
                isScrollable: false,
                indicatorSize: TabBarIndicatorSize.label,
                tabs: [
                  Tab(
                    icon: Icon(
                      Icons.person,
                      size: 30,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.group,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.whatshot,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.notifications,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.message,
                    ),
                  )
                ]),
          ),
          body: TabBarView(
            children: [
              Center(child: Profile(currentUser)),
              Center(child: Chanels()),
              Center(child: CardPictures(currentUser, users)),
              Center(child: Notifications(currentUser, notification)),
              Center(child: HomeScreen(currentUser, matches)),
            ],
            physics: NeverScrollableScrollPhysics(),
          )),
    ),
  ),

Answer 1

您可以通过这种方式使用BottomNavigationBar（）。您需要管理所有内容（例如，监听选项卡事件并相应地渲染页面）。

Prototype：

class _TabsScreenState extends State<TabsScreen> {
  final var  _pages = [Screen1(),Screen2()];

  int page_index = 0;

  void _pageSelect(int index) {
    setState(() {
      page_index = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(),
      ),
      body: _pages[page_index],
      bottomNavigationBar: BottomNavigationBar(
        onTap: _pageSelect,
        backgroundColor: '',
        unselectedItemColor: '',
        selectedItemColor: '',
        currentIndex: page_index,

        items: [
          BottomNavigationBarItem(
            backgroundColor: '',
            icon: Icon(''),
            title: Text(''),
          ),
          BottomNavigationBarItem(
            backgroundColor: '',
            icon: Icon('),
            title: Text(''),
          ),
        ],
      ),
    );
  }
}

Answer 2

如果您知道如何使用标签栏，那么它对您来说很简单。您可以根据自己的需要在任何行列中使用选项卡栏，只需为选项卡栏和tabBarView提供控制器，并且无论使用哪种选项卡栏，这两个控制器都必须相同。我几乎亲自完成的所有小部件中的选项卡栏，都将其放在一行中。