如何在BottomAppBar颤动上以编程方式更改选项卡？答案

【问题标题】：How to change tab programmatically on BottomAppBar flutter?如何在BottomAppBar颤动上以编程方式更改选项卡？
【发布时间】：2021-07-19 19:21:32
【问题描述】：

我正在开发一个颤振应用程序，我需要以编程方式更改我的选项卡，如果我来到堆栈的最后一个屏幕，那么我需要以编程方式重定向到第一个选项卡，而不是关闭应用程序。

请考虑以下代码片段：

final PageStorageBucket bucket = PageStorageBucket();

Widget currentScreen = HomeFragment();

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Color(0xFFF3F5F9),
  body: PageStorage(
    child: currentScreen,
    bucket: bucket,
  ),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    child: Container(
      width: double.infinity,
      height: 15.5,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              setState(() {
                currentScreen = HomeFragment();
                currentTab = 0;
              });
            },
            child: Expanded(
              child: Container(
                height: 15.5,
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      'assets/home.png',
                      color: currentTab == 0 ? Color(0xFF193F70) : Color(0xFFABAAAA),
                    ),
                    SizedBox(
                      height: 3.0,
                    ),
                    Text(
                      'Home',
                    ),
                  ],
                ),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                redirectToLogin();
              });
            },
            child: Expanded(
              child: Container(
                height: 15.5,
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      'assets/login_icon.png',
                      color: currentTab == 1 ? Color(0xFF193F70) : Color(0xFFABAAAA),
                    ),
                    SizedBox(
                      height: 3.0,
                    ),
                    Text(
                      'Login',
                    ),
                  ],
                ),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                redirectToSignUp();
              });
            },
            child: Expanded(
              child: Container(
                height: 15.5,
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      'assets/signup_icon.png',
                      color: currentTab == 2 ? Color(0xFF193F70) : Color(0xFFABAAAA),
                    ),
                    SizedBox(
                      height: 3.0,
                    ),
                    Text(
                      'SignUp',
                    ),
                  ],
                ),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                currentScreen = ProfileFrag();
                currentTab = 3;
              });
            },
            child: Expanded(
              child: Container(
                height: 15.5,
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      'assets/menu_icon.png',
                      color: currentTab == 3 ? Color(0xFF193F70) : Color(0xFFABAAAA),
                    ),
                    SizedBox(
                      height: 3.0,
                    ),
                    Text(
                      'Menu',
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);}

在这里，我正在寻找可以以编程方式重定向到不同选项卡的东西。如果我在这里做错了什么，请告诉我。

【问题讨论】：

标签： flutter bottomappbar

【解决方案1】：

我相信使用真正的 Flutter TabBar 会更好。你考虑过这个解决方案吗？这个博客上有一个完整的教程：https://blog.logrocket.com/flutter-tabbar-a-complete-tutorial-with-examples/ 它包括一种以编程方式更改选项卡的方法。这实际上是我试图用我自己的应用程序做的事情。让我知道这是否适合您。

【讨论】：