如何在颤动中使用 BottomAppBar 进行导航答案

【问题标题】：How to use a BottomAppBar for navigation in flutter如何在颤动中使用 BottomAppBar 进行导航
【发布时间】：2019-07-04 11:27:58
【问题描述】：

我对 Flutter 还很陌生，我创建了一个带有停靠 FAB 的漂亮 BottomAppBar，但是我也想使用这个 AppBar 进行页面导航。我已经用 BottomNavigationBar 尝试过，但后来我失去了停靠的浮动操作按钮。如何实现导航到底部应用栏？？

floatingActionButton: Container(
        height: 65.0,
        width: 65.0,
        child: FittedBox(
          child: FloatingActionButton(

        onPressed: (){},
        child: Icon(Icons.add, color: Colors.white,),
        // elevation: 5.0,
      ),
        ),
      ),


      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        // elevation: 20.0,

        shape: CircularNotchedRectangle(),
        child: Container( 
          height: 75,
          child: Row( 

        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,

        children: <Widget>[
          IconButton(
            iconSize: 30.0,
            padding: EdgeInsets.only(left: 28.0),
            icon: Icon(Icons.home),
            onPressed: () {
              setState(() {
                currentIndex = 0;
              });
            },
          ),

          IconButton(            
            iconSize: 30.0,
            padding: EdgeInsets.only(right: 28.0),
            icon: Icon(Icons.search),
            onPressed: () {
               setState(() {
                currentIndex = 1;
                print("${currentIndex}");

              });
            },
          ),
          IconButton(
            iconSize: 30.0,
            padding: EdgeInsets.only(left: 28.0),
            icon: Icon(Icons.notifications),
            onPressed: () {
               setState(() {
                currentIndex = 2;
                print("${currentIndex}");

              });
            },
          ),
          IconButton(
            iconSize: 30.0,
            padding: EdgeInsets.only(right: 28.0),
            icon: Icon(Icons.list),
            onPressed: () {
               setState(() {
                currentIndex = 3;
                print("${currentIndex}");
              });
            },
          )
        ],
      ),
        )
      )

【问题讨论】：

只需将BottomNavigationBar 放入child BottomAppBar 的属性中

标签： dart flutter

【解决方案1】：

一种方法是使用 - PageView 小部件。

带有您的编码BottomAppBar的示例代码。

class _DemoPageState extends State<FormPage> {
  PageController _myPage = PageController(initialPage: 0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 75,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(left: 28.0),
                icon: Icon(Icons.home),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(0);
                  });
                },
              ),
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(right: 28.0),
                icon: Icon(Icons.search),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(1);
                  });
                },
              ),
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(left: 28.0),
                icon: Icon(Icons.notifications),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(2);
                  });
                },
              ),
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(right: 28.0),
                icon: Icon(Icons.list),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(3);
                  });
                },
              )
            ],
          ),
        ),
      ),
      body: PageView(
        controller: _myPage,
        onPageChanged: (int) {
          print('Page Changes to index $int');
        },
        children: <Widget>[
          Center(
            child: Container(
              child: Text('Empty Body 0'),
            ),
          ),
          Center(
            child: Container(
              child: Text('Empty Body 1'),
            ),
          ),
          Center(
            child: Container(
              child: Text('Empty Body 2'),
            ),
          ),
          Center(
            child: Container(
              child: Text('Empty Body 3'),
            ),
          )
        ],
        physics: NeverScrollableScrollPhysics(), // Comment this if you need to use Swipe.
      ),
      floatingActionButton: Container(
        height: 65.0,
        width: 65.0,
        child: FittedBox(
          child: FloatingActionButton(
            onPressed: () {},
            child: Icon(
              Icons.add,
              color: Colors.white,
            ),
            // elevation: 5.0,
          ),
        ),
      ),
    );
  }
}

【讨论】：

用容器包裹图标按钮，并对其应用填充，会给 iconButton 带来圆形波纹效果。

【解决方案2】：

BottomAppBar 和BottomNavigationBar 之间的区别在于，对于最后一个，您可以设置在单击下面的图标时要呈现的子（页面）列表（onTap 方法）。使用BottomAppBar，你必须设置一个Navigator 方法，在UI/UX therms 中讲，我不认为它看起来很漂亮。

创建一个辅助组件，该组件将具有 BottomAppBar。
然后，传递一个 Row 作为它的子方法
用您的图标按钮填充
设置onPressed方法调用页面(Navigator.of(context).pushName('/yourScreenHere')

然后，您制作的每个屏幕都可以在其上添加 AppBar。

【讨论】：

只需将BottomNavigationBar 放入child BottomAppBar 的属性中

【解决方案3】：

您可以使用相同的脚手架为您的身体使用switch case - 就像在tabcontroller 或radiobutton 中一样。只需在按下 bottomAppBar 图标时更新正文。查看this 链接以获得更好的理解。 :)

【讨论】：