如何向上方悬垂的底部导航栏添加按钮-Flutter [英] How to add button to bottom navigation bar which hang out above - Flutter

问题描述

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

I have bottom navigation bar with center item that looks like on this picture:

如何在Flutter中实现这种功能？

How to implement such a thing in Flutter?

我发现我放入BottomNavigatonBarItem中的每个图标都位于导航栏的边界内。但我需要将它挂在上面。

I found that every icon that I put into BottomNavigatonBarItem is fitted inside navigation bar's bounds. But I need it to be hanged out above.

推荐答案

您可以使用 Stack 在彼此顶部显示小部件。
与属性 overflow 组合： Overflow.visible ，以及满足您需要的对齐方式。

You can a Stack to display widgets on the top of each others. Combined with the property overflow: Overflow.visible, and an alignment that fits your need.

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

The following example will achieve thing as in your picture : A floating button horizontally centered, top aligned with the bottom bar.

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

这篇关于如何向上方悬垂的底部导航栏添加按钮-Flutter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！