Flutter中BottomAppBar与FloatingActionButton异常问题求助

问题原因 #

1. 凹槽偏离中心：原代码中BottomAppBar被Padding和ClipRRect包裹，导致其宽度未占满屏幕，CircularNotchedRectangle的凹槽是基于BottomAppBar自身宽度计算的，因此偏离屏幕中心。
2. Row子组件未居中：使用MainAxisAlignment.spaceBetween让四个按钮在非满宽容器内均匀分布，既无法实现左右对称，也没有为FAB留出对应空白位置。

修改后的完整代码 #

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      backgroundColor: gray70,
      bottomNavigationBar: BottomAppBar(
        height: 70,
        color: gray60,
        surfaceTintColor: Colors.transparent,
        shape: const CircularNotchedRectangle(),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(12),
          child: Container(
            color: gray60,
            padding: const EdgeInsets.fromLTRB(10, 0, 10, 10),
            child: Row(
              children: [
                // 左侧按钮组
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      IconButton(
                        onPressed: () {},
                        icon: const Icon(CupertinoIcons.home),
                      ),
                      IconButton(
                        onPressed: () {},
                        icon: const Icon(CupertinoIcons.square_grid_2x2),
                      ),
                    ],
                  ),
                ),
                // 右侧按钮组
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      IconButton(
                        onPressed: () {},
                        icon: const Icon(CupertinoIcons.calendar),
                      ),
                      IconButton(
                        onPressed: () {},
                        icon: const Icon(CupertinoIcons.creditcard),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

关键改动说明 #

• 让BottomAppBar直接作为bottomNavigationBar的子组件，确保其宽度占满屏幕，凹槽自动对齐屏幕中心。
• 将ClipRRect和Padding移至BottomAppBar内部，既保留圆角和边距效果，又不破坏BottomAppBar的布局计算。
• 用两个Expanded将按钮分为左右对称的两组，每组内部通过MainAxisAlignment.spaceAround均匀排列，中间自然留出FAB对应的空白区域，实现目标样式。

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