Question

HomeScreen（）函数调用App的主屏幕。我如何在没有BottomNavigationBar和AppBar的情况下路由/移动到“ Team”，“ Add”等页面。我想显示另一个页面和后退按钮，以及新的底部导航栏。

我在Flutter项目中拥有这个：

class APPMain extends StatefulWidget {
  @override
  _APPMainState createState() => _APPMainState();
}

class _APPMainState extends State<APPMain> {

  int _currentIndex = 0;

  _onTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> screens = [
      HomeScreen(),
      Center(child: Text("Team")),
      Center(child: Text("Add")),
      Center(child: Text("Search")),
      Center(child: Text("Settings")),
    ];

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xffffffff),
        iconTheme: IconThemeData(color: Colors.grey),
        title: Text("Test App", style: TextStyle(color: Colors.grey),),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.account_circle),
            onPressed: (){},
          ),
        ],
      ),
      body: Container(
          color: Color(0xfff4f4f4),
          child: Center(
            child: screens[_currentIndex],
          ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.red,
        onTap: _onTapped,
        items: [
            BottomNavigationBarItem(
              title: Text('Home'), icon: Icon(Icons.home)),
            BottomNavigationBarItem(
              title: Text('Team'), icon: Icon(Icons.group)),
            BottomNavigationBarItem(
              title: Text('Add'), icon: Icon(Icons.add)),
            BottomNavigationBarItem(
              title: Text('Search'), icon: Icon(Icons.search)),
            BottomNavigationBarItem(
              title: Text('Settings'), icon: Icon(Icons.settings)),
          ]),
      );
  }
}

非常感谢您的帮助。

Answer 1

这几乎肯定是重复的，但是我无法通过快速搜索找到一个问类似问题的问题，所以我还是会回答。

答案实际上很简单，但是需要更多地了解如何编写Flutter应用程序-您应该使用在MaterialApp或WidgetApp中内置的导航器或导航器，而不是自己进行导航。最简单的方法是使用MaterialApp的routes属性，并随每个页面一起传递地图。然后，当您要切换页面时，只需在要切换页面的任何位置（即按钮）使用Navigator.pushNamed(context, <name>)。

当您来自其他框架时，可能会使您感到有些困惑的是，与其拥有一个Scaffold并切换其主体，不如切换整个页面，并且每个页面都应该具有一个Scaffold。

Here's an example in the documentation显示如何在页面之间导航。

为了记录，尽管这是一个坏主意，您也可以使其与原始代码一起使用-您要做的就是根据_currentIndex设置的内容，使用不同的选项构建一个不同的BottomNavigationBar。但我不建议这样做。根据我的建议，您还可以在页面之间获得动画效果，后退按钮功能，还可以连接分析以跟踪页面使用情况，以及作为导航一部分的flutter提供的其他功能。

在脚手架的屏幕之间切换时更改底部导航栏

1 个答案: