Flutter 使用一个脚手架使用底部导航栏颤振更改页面

我有一个颤振应用程序与底部导航栏，appBar等，我还需要做一个导航。 是否可以在Webdev中执行类似布局的操作，而不是在每个页面上使用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');
  }

}

它以很好的方式呈现一个按钮，但在我使用导航后，布局崩溃，我只能在黑屏上看到文本

---

P.S.BottomBar只是我的自定义BottomNavigationBar

我创建了一个省道板来显示它是如何动态工作的：

实现这一点的方法是只使用小部件树中较高的一个支架，只需更改下面的小部件，特别是在scaffold body:parameter中。注意：您不能将导航小部件与此方法一起使用，因为它会从脚手架上弹出

万一省道板不工作，你可以在这里看到代码

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

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回资料App（主页：MyPages（））；
}
}
类MyPages扩展了StatefulWidget{
MyPages（{Key}）：超级（Key:Key）；
@凌驾
MyPagesState createState（）=>MyPagesState（）；
}
类MyPagesState扩展状态{
int _selectedIndex=0；
列表_widgetOptions=[
容器(
颜色：颜色。绿色，
child:Center（child:Text（“将页面放在此处”），
约束：BoxConstraints.expand（），
),
容器(
颜色：颜色。绿色，
child:Center（child:Text（“您只需要构建它们和…”）），
约束：BoxConstraints.expand（），
),
容器(
颜色：颜色。绿色，
child:Center（child:Text（“将它们放入_widgetOption列表”），
约束：BoxConstraints.expand（），
)
];
void\u未映射（整数索引）{
设置状态（）{
_selectedIndex=索引；
});
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：常量文本（“底部导航栏示例”），
),
正文：中(
子项：_widgetOptions.elementAt（_selectedIndex），
),
底部导航栏：底部导航栏(
项目：常数[
底部导航气压计(
图标：图标（Icons.home），
标题：文本（“主页”），
),
底部导航气压计(
图标：图标（Icons.business），
标题：文本（“业务”），
),
底部导航气压计(
图标：图标（Icons.school），
标题：文本（“学校”），
),
],
currentIndex:_selectedIndex，
selectedItemColor:Colors.amber[800]，
onTap:\u未映射，
),
);
}
}

---

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

可能我做错了什么，但现在flift说MaterialAppCheck中没有bottomNavigationBar参数。请检查我的原始帖子，我已经添加了详细信息，我更新了我的答案。您将无法以相同的方式使用导航。。。您只需要更新脚手架主体中的小部件。如果你使用导航小部件，它会改变整个页面。。。如果你想保持单一的导航栏，你必须改变脚手架主体内的小部件。我会制作一个工作的省道板，这样你就可以看到一个例子。看起来这是最好的方法。谢谢你！我根据你提供的新信息更新了我的答案。