Question

我是扑朔迷离的新手，最近我是第一次实现底部导航栏。

因此，像任何普通应用程序一样，我想实现一个可以使用底部导航栏进行导航的屏幕，并且每个屏幕都有自己的Appbar和所有内容（简称为脚手架小部件）。< / p>

但是，由于底部导航栏本身包裹在Scaffold中，所以我读过某个地方建议不要嵌套Scaffold小部件。

因此，在这种情况下，是否有其他替代方法可以实现此目的？

谢谢：）

Answer 1

您只能为3个，4个或5个屏幕制作一个支架

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
     Screen1(); // this is your first screen which return let's say listview builder
     Screen2(); // this is your second screen which return let's say container
     Screen3(); // this is your third screen which return let's say gridview or column
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

此处onTap方法在屏幕上导航。您不需要navigator.push或navigator.pushNamed即可浏览屏幕。

在使用BottomNavigation栏时如何实现每个具有Scaffold小部件的屏幕？

1 个答案: