Flutter如何在BottomNavigationBar中实现矩形圆角凹槽效果

你代码的核心问题是凹槽形状与FAB形状不匹配，圆角数值不一致，导致没有生成预期的贴合凹口，按以下步骤修改即可：

• 统一凹槽轮廓与FAB的圆角数值：AutomaticNotchedShape的第二个参数定义的是凹口的形状，必须和FloatingActionButton的shape参数完全一致
• 调整notchMargin数值：该参数控制凹口和FAB之间的间距，可根据你想要的缝隙大小微调
• 可选：调整elevation数值让底部栏的阴影效果更符合设计预期

修改后的完整代码如下：

bottomNavigationBar: BottomAppBar(
          elevation: 2,
          notchMargin: 4, // 可根据想要的缝隙大小微调
          clipBehavior: Clip.antiAlias,
          color: Color(0xff1c1f26),
          shape: AutomaticNotchedShape(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15),
                      topRight: Radius.circular(15))),
              // 凹口形状和圆角和FAB保持完全一致
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(17)))),
          child: SizedBox(
            width: double.infinity,
            height: 60,
          )),
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(17))),
        onPressed: () {},
        child: Icon(Icons.favorite),
      )

如果实现后还有细微的位置偏差，只需要微调notchMargin的数值即可，数值越大FAB和凹口之间的缝隙越宽。

内容的提问来源于stack exchange，提问作者Syed Mahfuzur Rahman