Question

我有一个 bottomNavigationBar，当我点击 Page2 时，我应该登陆一个带有 {{1} }屏幕右上角有一个图标，但是当我点击它时，我只有一个空白的黑色页面。

这是AppBar：

code

这是class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); } class _HomeState extends State<Home> { int _selectedIndex = 0; static List<Widget> _widgetOptions = <Widget>[ Home_page(), Page1(), Page2(), Page3(), Page4(), ]; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey[900], bottomNavigationBar: BottomNavigationBar( backgroundColor: Colors.grey[900], items: <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', backgroundColor: Colors.grey[900], ), BottomNavigationBarItem( icon: Icon(Icons.business), label: 'Esplora', backgroundColor: Colors.grey[900], ), BottomNavigationBarItem( icon: Icon(Icons.school), label: 'Colori', backgroundColor: Colors.grey[900], ), BottomNavigationBarItem( icon: Icon(Icons.school), label: 'Altro', backgroundColor: Colors.grey[900], ), BottomNavigationBarItem( icon: Icon(Icons.school), label: 'Profilo', backgroundColor: Colors.grey[900], ), ], currentIndex: _selectedIndex, selectedItemColor: Colors.amber[800], onTap: _onItemTapped, ), ); } }的代码：

Page2

我不知道为什么 class Page2 extends StatefulWidget { @override _Page2_HomeState createState() => _Page2_HomeState(); } class _Page2_HomeState extends State<Page2_Home> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( actions: [ navForm(), ], title: Text("Page2"), ), ); } Widget navForm() { return RaisedButton( child: Icon(Icons.plus_one), onPressed: () => navigateToForm(context), ); } } 不存在，也许我不擅长处理索引？

或者 AppBar 没有很好地实现，这是我第一次处理 AppBar 所以我认为错误在这些 2 元素之一。

Answer 1

您还没有在 Scaffold 中添加 body。这就是为什么每当您点击选项卡时，您都得不到想要的结果。您可以像这样在脚手架中添加 body：

 body: _widgetOptions.elementAt(_selectedIndex),

完整的构建代码：

class _HomeState extends State<Home> {
  int _selectedIndex = 0;
  static List<Widget> _widgetOptions = <Widget>[
    Container(),
    Container(),
    Page2(),
    Container(),
    Container(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[900],
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.grey[900],
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
            backgroundColor: Colors.grey[900],
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Esplora',
            backgroundColor: Colors.grey[900],
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'Colori',
            backgroundColor: Colors.grey[900],
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'Altro',
            backgroundColor: Colors.grey[900],
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'Profilo',
            backgroundColor: Colors.grey[900],
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
      body: _widgetOptions.elementAt(_selectedIndex),
    );
  }
}

Answer 2

向脚手架主页添加一个正文，如下所示：

@override
      Widget build(BuildContext context) {
        return Scaffold(
          body: _widgetOption[_selectedIndex ],
          backgroundColor: Colors.grey[900],
          bottomNavigationBar: BottomNavigationBar(
            backgroundColor: Colors.grey[900],

底部导航栏页面上缺少 AppBar Flutter

2 个答案: