Flutter 使用一个 Scaffold 使用 BottomNavigationBar 更改页面

Question

我有一个带有bottomNavigationBar、appBar 等的flutter 应用程序，我还需要进行导航。 是否可以在 Web 开发中执行布局之类的操作，而不是在每个页面上使用 Scaffold？ 因为我不想在每个屏幕上绘制底部导航。

这种方式行不通

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('f'),
        ),
        bottomNavigationBar: BottomBar(),
        body: Com(),
      ),
    );

class Com extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('go'),
      onPressed: () => {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(
              builder: (context) => Cam()),
        )
      },
    );
  }
}

class Cam extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text('Cam');
  }

}

它以很好的方式呈现一个按钮，但是在我使用导航后，布局崩溃并且我只在黑屏上看到文本 附言BottomBar 只是我的自定义 BottomNavigationBar

Answer 1

我创建了一个 dartpad 来展示它是如何动态工作的： https://dartpad.dev/4125ebd6684e4cb2c69c5ec4560caab3

解决这个问题的方法是在小部件树中只使用一个高处的脚手架，并且只需更改下面的小部件，特别是在 Scaffold body: 参数中。注意：您不能将 Navigation 小部件与此方法一起使用，因为它会从 Scaffold 弹出。

以防 dartpad 不起作用，您可以在此处查看代码。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyPages());
  }
}

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

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

class MyPagesState extends State<MyPages> {
  int _selectedIndex = 0;
  List<Widget> _widgetOptions = <Widget>[
    Container(
      color: Colors.green,
      child: Center(child: Text("put your pages here")),
      constraints: BoxConstraints.expand(),
    ),
        Container(
      color: Colors.green,
      child: Center(child: Text("you just have to build them and...")),
      constraints: BoxConstraints.expand(),
    ),
        Container(
      color: Colors.green,
      child: Center(child: Text("put them in the _widgetOption list")),
      constraints: BoxConstraints.expand(),
    )
  ];

  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,
      ),
    );
  }
}

可以看到，Scaffold和bottomNavigationBar只有一个，但是可以显示三个页面。点击导航按钮只会将索引更新为 _widgetOptions。因此，要使用此方法，您只需使用要显示的页面动态或静态填充 _widgetOptions：