如何将按钮添加到悬挂在上方的底部导航栏 - Flutter答案

【问题标题】：How to add button to bottom navigation bar which hang out above - Flutter如何将按钮添加到悬挂在上方的底部导航栏 - Flutter
【发布时间】：2018-08-24 06:20:39
【问题描述】：

我有底部导航栏，中心项目如下图所示：

如何在 Flutter 中实现这样的东西？

我发现我放入 BottomNavigatonBarItem 的每个图标都安装在导航栏的范围内。但我需要把它挂在上面。

【问题讨论】：

@MohammadAli - 看看问题的主题 :) 我正在用 Flutter 开发应用程序，而不是 android

标签： android flutter bottomnavigationview floating-action-button

【解决方案1】：

您可以Stack 将小部件显示在彼此的顶部。结合属性overflow:Overflow.visible，以及符合您需要的对齐方式。

以下示例将实现您图片中的效果：水平居中的浮动按钮，顶部与底部栏对齐。

return new Scaffold(
  bottomNavigationBar: new Stack(
    overflow: Overflow.visible,
    alignment: new FractionalOffset(.5, 1.0),
    children: [
      new Container(
        height: 40.0,
        color: Colors.red,
      ),
      new Padding(
        padding: const EdgeInsets.only(bottom: 12.0),
        child: new FloatingActionButton(
          notchMargin: 24.0,
          onPressed: () => print('hello world'),
          child: new Icon(Icons.arrow_back),
        ),
      ),
    ],
  ),
);

【讨论】：

FloatingActionButton 没有notchMargin 属性

【解决方案2】：

Google 最近添加了一个名为 BottomAppBar 的东西，它提供了一种更好的方法来执行此操作。只需在脚手架中添加BottomAppBar，创建导航FAB，如果您希望FAB 具有文本，则向FAB 添加标签。创建类似于以下的结果：https://cdn-images-1.medium.com/max/1600/1*SEYUo6sNrW0RoKxyrYCqbg.png。

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(title: const Text('Tasks - Bottom App Bar')),
    floatingActionButton: FloatingActionButton.extended(
      elevation: 4.0,
      icon: const Icon(Icons.add),
      label: const Text('Add a task'),
      onPressed: () {},
    ),
    floatingActionButtonLocation: 
      FloatingActionButtonLocation.centerDocked,
    bottomNavigationBar: BottomAppBar(
      hasNotch: false,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          )
        ],
      ),
    ),
  );
}

【讨论】：

【解决方案3】：

您也可以使用 FloatingActionButtonLocation 和 Expanded 小部件来执行此操作，如下所示：

Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: _buildTodoList(),
      floatingActionButton: new FloatingActionButton(
        onPressed: _pushAddTodoScreen,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
        elevation: 4.0,
      ),
      bottomNavigationBar: BottomAppBar(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(child: IconButton(icon: Icon(Icons.home)),),
            Expanded(child: IconButton(icon: Icon(Icons.show_chart)),),
            Expanded(child: new Text('')),
            Expanded(child: IconButton(icon: Icon(Icons.tab)),),
            Expanded(child: IconButton(icon: Icon(Icons.settings)),),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

预览：

【讨论】：

【解决方案4】：

除了@Raunak的输入，你还可以使用FloatingActionButton的“border”属性来获得一个无缝的边框来生成想要的效果——代码sn-p如下：

Widget buildFab() {
  FloatingActionButton fab = FloatingActionButton(
    backgroundColor: Color(0xFF9966CC),
    child: Icon(Icons.add),
    shape: CircleBorder(
      side: BorderSide(
        color: Colors.white,
        width: 3.0,
      ),
    ),
    tooltip: "Add...",
    onPressed: () {
      print("fab is pressed!!!");
    }
  );

  return fab;
}

如果将 FAB 包裹在 Material 中并为其添加阴影效果会更好 - 如下所示：

Material buildFabWithShadow() {
  return Material(
  shadowColor: Color(0x802196F3),
  shape: CircleBorder(), 
  elevation: 16.0,
  child: buildFab(),
);

尝试后，我得到了以下效果1-请注意边框宽度可以根据您的意愿调整！

【讨论】：