如何使用颤动的底部导航栏导航到几个新页面？

Question

我想在 Flutter 中使用底部导航栏导航到几个新页面。

我尝试了几种方法来实现我的要求。但他们都没有为我工作。为了更好地理解，我在下面附上了我的相关完整源代码。

提前谢谢你。 :)

飞镖源码：

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

// ignore: camel_case_types
class _dashboardState extends State<dashboard> {
  @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: const EdgeInsets.only(top: 20.0),
              child: MaterialButton(
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => profile()));
                },
                child: const Text('Test'),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 300.0, top: 10.0),
              child: IconButton(
                icon: new Icon(Icons.notifications),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => Notifications(),
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 1.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,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.book_online),
            label: 'Page 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.read_more),
            label: 'Page 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Page 3',
          ),
        ],
      ),
    );
  }
}

Answer 1

命题有很多，这是一个： 首先，您首先添加一个变量索引以了解您的位置。然后添加一个函数来改变这个变量的内容。

    class _dashboardState extends State< dashboard > {
  
  int currentIndex = 1;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WillPopScope(
        child: (currentIndex == 1)
            ? HomeScreen()
            : (currentIndex == 2)
                ? Screen2()
                : (currentIndex == 3)
                    ? Screen3()
                    : Settings(),
        onWillPop: () async {
          bool backStatus = onWillPop();
          if (backStatus) {
            exit(0);
          }
          return false;
        },
      ),

然后将其链接到导航栏按钮。

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    items: const [
      InkWell(
  onTap: () => changeIndex(1),
  child: BottomNavigationBarItem(
        icon: Icon(Icons.book_online),
        label: 'Page 1',
      ),
      .....
    ],
  ),