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

Question

我是 Flutter 的新手，最近我第一次实现底部导航栏。

所以作为任何通用应用程序，我想实现一个可以使用底部导航栏导航的屏幕，每个屏幕都有自己的 Appbar 和所有东西（简称 Scaffold 小部件）。

但由于底部导航栏本身被包裹在 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 来导航屏幕。