Android 如何将按钮添加到悬挂在上方的底部导航栏-颤振

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

如何在flatter中实现这样的事情

---

我发现我放入BottomNavigationBarItem的每个图标都安装在导航栏的边界内。但是我需要把它挂在上面。

您可以使用

堆栈

将小部件显示在彼此的顶部。 结合属性

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

---

谷歌最近添加了一个名为

BottomAppBar

的东西，它提供了一种更好的方法。只需在scaffold中添加

BottomAppBar

，创建一个导航FAB，并在FAB中添加一个标签（如果您希望它包含文本）。创建类似以下内容的结果：

小部件构建（构建上下文）{
归还新脚手架(
appBar:appBar（标题：常量文本（“任务-底部应用程序栏”），
floatingActionButton:floatingActionButton.extended(
标高：4.0，
图标：常量图标（Icons.add），
标签：常量文本（“添加任务”），
按下：（）{}，
),
浮动操作按钮位置：
浮动ActionButtonLocation.centerDocked，
bottomNavigationBar:BottomAppBar(
哈斯：错，
孩子：新的一排(
mainAxisSize:mainAxisSize.max，
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
图标按钮(
图标：图标（图标菜单），
按下：（）{}，
),
图标按钮(
图标：图标（Icons.search），
按下：（）{}，
)
],
),
),
);
}

您也可以使用FloatingActionButtonLocation和扩展小部件来完成此操作，如下所示：

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

小部件构建（构建上下文）{
归还新脚手架(
appBar：新的appBar(
标题：新文本（widget.title），
),
正文：_buildTodoList（），
floatingActionButton：新的floatingActionButton(
按下按钮：\ u按添加到屏幕，
工具提示：“增量”，
子：新图标（Icons.add），
标高：4.0，
),
bottomNavigationBar:BottomAppBar(
孩子：新的一排(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
已展开（子项：图标按钮（图标：图标（Icons.home）），），
已展开（子项：图标按钮（图标：图标（Icons.show_chart）），），
扩展（子项：新文本（“”）），
已展开（子项：图标按钮（图标：图标（Icons.tab）），），
已展开（子项：图标按钮（图标：图标（Icons.settings）），），
],
),
),
floatingActionButtonLocation:floatingActionButtonLocation.centerDocked，
);
}

预览：

---

除了@Raunak的输入，您还可以使用FloatingActionButton的“border”属性获得无缝边框以生成所需效果-代码片段如下：

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

如果将晶圆厂包裹在材质中并向其添加阴影效果，效果会更好-如下所示：

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

---

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

@MohammadAli-看看问题的主题：）我在用flatter开发应用程序，而不是androidFloatingActionButton没有

notchMargin

属性

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