Question

我正在尝试使用底部导航栏中的图标导航到应用内的不同页面。我尝试了许多教程，但似乎并没有找到实现此目标的最佳方法。我已经创建了我的主页（下面的代码）以及另外两个页面（收件箱和登录），都返回简单的支架。

首先，我想知道这是否是实现我要实现的目标的最佳方法，其次，如何更改我的代码，以允许我根据所点击的图标导航到不同的页面。我知道下面的代码无法执行，我只是想展示自己尝试过的内容。

我的代码：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  _onTap(int index) {
    Navigator.of(context)
        .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
      return _children[_currentIndex];
    }));}

  final List<Widget> _children = [
    HomePage(),
    InboxPage(),
    SignInPage()
  ];

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
      SizeConfig().init(context);
      return Scaffold(
        appBar: PreferredSize(preferredSize: Size(double.infinity, 75),
          child: AppBar(
              elevation: 0.0,
              centerTitle: false,
              title: Column(
                children: <Widget>[
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      currentDate,
                      textAlign: TextAlign.left,
                      style: TextStyle(
                          color: titleTextColor,
                          fontWeight: subTitleFontWeight,
                          fontFamily: titleFontFamily,
                          fontSize: subTitleFontSize),
                    ),
                  ),
                  SizedBox(
                    height: 15,
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      'Some text here',
                      style: TextStyle(
                          color: titleTextColor,
                          fontWeight: titleTextFontWeight,
                          fontFamily: titleFontFamily,
                          fontSize: titleFontSize),
                    ),
                  ),
                ],
              ),
              backgroundColor: kPrimaryColor,
              shape: titleBarRounding
          ),
        ),
        body: BodyOne(),
        bottomNavigationBar: BottomNavigationBar(
            currentIndex: _currentIndex,
            type: BottomNavigationBarType.fixed,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text('Home'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.mail),
                title: Text('Inbox'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.account_circle),
                title: Text('Account'),


              )
            ],
          onTap: () => _onTap(_currentIndex),
        ),);
    }
  }

谢谢。

Answer 1

您所在的屏幕不能成为您要导航的屏幕的一部分，并且每次仅需更改selectedPage时都不需要按新屏幕，这是一个示例它的外观：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int selectedPage = 0;

  final _pageOptions = [
    HomeScreen(),
    InboxScreen(),
    SignInScreen()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: _pageOptions[selectedPage],
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home, size: 30), title: Text('Home')),
            BottomNavigationBarItem(icon: Icon(Icons.mail, size: 30), title: Text('Inbox')),
            BottomNavigationBarItem(icon: Icon(Icons.account_circle, size: 30), title: Text('Account')),
          ],
          selectedItemColor: Colors.green,
          elevation: 5.0,
          unselectedItemColor: Colors.green[900],
          currentIndex: selectedPage,
          backgroundColor: Colors.white,
          onTap: (index){
            setState(() {
              selectedPage = index;
            });
          },
        )
    );
  }
}

让我知道是否需要更多说明。

Answer 2

_onTap函数的输入参数尚未使用，需要删除。

_onTap() {
    Navigator.of(context)
        .push(MaterialPageRoute(builder: (BuildContext context) => _children[_currentIndex])); // this has changed
  }

在onTap的{{1}}中，您需要更改BottomNavigationBar，然后调用_currentIndex函数，该函数导航到所选屏幕。

_onTap

您可以将此onTap: (index) { setState(() { _currentIndex = index; }); _onTap(); },添加到所有屏幕，但要注意BottomNavigationBar的初始值，该初始值会根据您插入_currentIndex的屏幕而变化。

完整代码：

BottomNavigationBar

Answer 3

最好的方法是为屏幕创建包装。像这样：

class Wrapper extends StatefulWidget {
  Wrapper();

  _WrapperState createState() => _WrapperState();
}

class _WrapperState extends State<Wrapper> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    HomePage(),
    InboxPage(),
    SignInPage()
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items:[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text('Inbox'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            title: Text('Account'),
          )
        ],
      ),
    );
  }
}

Flutter-使用底部导航栏图标进行多页导航

3 个答案: