Flutter如何在底部导航栏中添加垂直和水平方向均居中的按钮

你可以根据自己的技术栈选择对应的实现方案，无需手动计算偏移量，官方组件/基础CSS即可实现底部导航栏正中间悬浮按钮的效果。

Android端实现方案 #

借助BottomAppBar + FloatingActionButton的官方组合组件实现：

• 布局文件中将两个组件放在同一个CoordinatorLayout层级下，核心配置如下：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 页面主体内容 -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="8dp"
        app:fabCradleRoundedCornerRadius="16dp">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNav"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            app:menu="@menu/你的底部导航菜单文件" />

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bottomAppBar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

• 核心参数说明：
  • app:fabAlignmentMode="center"：指定FAB在底部导航栏居中展示，是实现该效果的核心配置
  • app:fabCradleMargin：控制FAB和底部导航栏凹槽的间距，可根据视觉需求调整数值
  • app:layout_anchor="@id/bottomAppBar"：将FAB和底部导航栏绑定，自动适配位置

如果你使用Flutter开发，直接在Scaffold组件中配置floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked即可实现效果。

前端Web实现方案 #

如果是H5页面开发，用CSS固定定位即可实现：

/* 底部导航栏样式 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 10;
}
/* 居中悬浮按钮样式 */
.center-fab {
  position: fixed;
  bottom: 28px; /* 数值为底部导航高度的一半，可调整实现全嵌入/半嵌入效果 */
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  z-index: 11;
}

内容的提问来源于stack exchange，提问作者ellen100311