使用一个脚手架用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：