Flutter底部导航栏左上角、右上角默认背景圆角去除问题求助

你看到的顶部角落默认背景，是Scaffold的默认背景色透过圆角区域露出导致的——因为你开启了extendBody: true让页面内容延伸到底部导航栏下方，但页面背景和导航栏颜色不一致，就会在圆角缝隙里显出差异。

给你几个可行的解决方法：

方法1：统一Scaffold整体背景色 #

直接给Scaffold设置和底部导航栏相同的背景色，让圆角区域和导航栏颜色统一：

return Scaffold(
  backgroundColor: ColorPalette.primaryColor, // 新增该行
  body: SafeArea(
    child: SingleChildScrollView(
        child: // 你的页面内容
    )),
  extendBody: true,
  bottomNavigationBar: ClipRRect(
    borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(30), topRight: Radius.circular(60)),
    child: Container(
      color: ColorPalette.primaryColor,
      height: 80,
    ),
  ),
);

方法2：仅给页面内容容器设置背景色 #

如果不想让整个页面都用导航栏颜色，只需要给SingleChildScrollView的子容器设置对应颜色：

SingleChildScrollView(
  child: Container(
    color: ColorPalette.primaryColor, // 新增容器并设置颜色
    child: // 原来的页面内容
  ),
)

方法3：简化底部导航栏实现（可选） #

可以去掉外层的ClipRRect，直接用Container的decoration实现圆角，代码更简洁：

bottomNavigationBar: Container(
  height: 80,
  decoration: BoxDecoration(
    color: ColorPalette.primaryColor,
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(30),
      topRight: Radius.circular(60),
    ),
  ),
  clipBehavior: Clip.hardEdge, // 确保圆角裁剪生效
),

以上任意一种方法都能解决你遇到的圆角处默认背景问题。

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