如何在 flutter 中使用 bottomnavigationbar 移动到新页面？

Question

我想在 flutter 中使用 bottomNavigationBar 中的三个图标时移动到三个新页面（根据我下面的代码）。我尝试了几种方法，但代码不起作用，无法按照我的要求计算出来。

在这种情况下最重要的事情是使用现有代码并使用 bottomNavigationBar 更改移动到新页面所需的更改。

如果有人知道如何使用 bottomNavigationBar（使用我现有的代码）导航到新页面，请告诉我。

提前致谢。

代码：

class dashboard extends StatefulWidget {
  @override
  _dashboardState createState() => _dashboardState();
}

// ignore: camel_case_types
class _dashboardState extends State<dashboard> {
  int currentIndex = 1;

  changeIndex(index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context);
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 80.0, right: 250),
              child: Center(
                child: Container(
                  width: 200.0,
                  height: 20.0,
                  decoration:
                      BoxDecoration(borderRadius: BorderRadius.circular(15.0)),
                  child: (const Text(
                    'Hello',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontWeight: FontWeight.bold, color: Colors.black),
                  )),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 300.0, top: 1.0),
              child: IconButton(
                icon: new Icon(Icons.account_circle, size: 30.0),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => HomePage(),
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 300.0, top: 5.0),
              child: IconButton(
                icon: const Icon(
                  Icons.notifications,
                  size: 25.0,
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => Notifications(),
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 0.0),
              child: Center(
                child: Container(
                  width: 390,
                  height: 450,
                  decoration: BoxDecoration(
                      color: Colors.green.shade100,
                      borderRadius: BorderRadius.circular(10.0)),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () async {
        await authService.signOut();
      }),
      //  : _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.green[100],
        items: const [
          BottomNavigationBarItem(
            //I want to navigate to a new page Library();
            icon: Icon(Icons.book_online),
            label: 'Library',
          ),
          BottomNavigationBarItem(
            //I want to navigate to a new page Store();
            icon: Icon(Icons.read_more),
            label: 'Store',
          ),
          BottomNavigationBarItem(
            //I want to navigate to a new page Profile();
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

Answer 1

首先，您需要在按下 BottomNavigation 时声明页面目标

  final List<Widget> _children = [
    Library(),
    Store(),
    Profile(),
  ];

然后将_children作为正文放在Scaffold上。

 return Scaffold(
      body:_children[currentIndex]
 )

因为您有仪表板 class，您需要单独的 class 来包含 dashboard 并将其添加到 _children（记住，索引像数组一样从 0 开始）。之后，创建函数来处理按下选项卡时的事件

  void onTabTapped(int index) {
      setState(() {currentIndex = index;});
  }

在您的 BottomNavigation属性上添加 onTabTapped

    bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.green[100],
        onTap: onTabTapped,
        items: const [
          BottomNavigationBarItem(
            //I want to navigate to a new page Library();
            icon: Icon(Icons.book_online),
            label: 'Library',
          ),
          BottomNavigationBarItem(
            //I want to navigate to a new page Store();
            icon: Icon(Icons.read_more),
            label: 'Store',
          ),
          BottomNavigationBarItem(
            //I want to navigate to a new page Profile();
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
        ],
      ),

如何在 flutter 中使用 bottomnavigationbar 移动到新页面？

How to move to a new pages using bottomnavigationbar in flutter?

flutter

dart

flutter-bottomnavigation

flutter-routes