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

Posted 2023-05-06

【中文标题】如何使用颤动的底部导航栏导航到几个新页面？

【英文标题】：How can i navigate to several new pages using the bottom navigation bar in flutter?

【发布时间】：2022-01-15 05:40:17

【问题描述】：

我想在 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',
          ),
        ],
      ),
    );
  

【参考方案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',
      ),
      .....
    ],
  ),

【讨论】：

我怎样才能将此代码与我当前的代码联系起来？因为我有一个 SingleChildScrollView 作为我的 Scaffold 的主体？

您可以将 body 中的所有小部件放在名为 Homescreen 的单独状态类中......等等

我尝试将所有小部件放在一个单独的类中。但它仍然没有工作。有没有办法将上述代码附加到我现有的源代码中？