0

在颤动中使用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',
          ),
        ],
      ),
    );
  }
}
4

1 回答 1

1

首先，您需要在按下底部导航时声明页面目的地

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

然后_children作为身体穿上Scaffold。

 return Scaffold(
      body:_children[currentIndex]
 )

因为您有仪表板类，所以您需要单独的类来包含dashboard并添加它_children（请记住，索引从 0 开始，如数组）。之后，创建函数来处理按下选项卡时的事件

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

在您的底部导航上添加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',
          ),
        ],
      ),
于 2021-12-21T07:47:04.490 回答