Flutter技术问询：如何实现顶部左右圆角为20的自定义底部导航栏？

你的代码没生效，核心原因是BottomNavigationBar自带的背景会覆盖外层容器样式，或是被Scaffold底层背景透出干扰，下面给你两种可行的实现方案：

方案一：用ClipRRect直接裁剪 #

通过ClipRRect直接对BottomNavigationBar进行圆角裁剪，简单直接：

Scaffold(
  bottomNavigationBar: ClipRRect(
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(20),
    ),
    child: BottomNavigationBar(
      backgroundColor: Colors.blue,
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
      ],
    ),
  ),
  body: const Center(child: Text('页面内容')),
)

方案二：自定义容器+透明化处理 #

如果需要添加阴影等额外样式，可通过外层Container实现，同时需处理透色问题：

Scaffold(
  backgroundColor: Colors.transparent,
  bottomNavigationBar: Container(
    decoration: const BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        topRight: Radius.circular(20),
      ),
      boxShadow: [
        BoxShadow( // 可选：添加阴影增强立体感
          color: Colors.grey,
          blurRadius: 10,
          offset: Offset(0, -2),
        ),
      ],
    ),
    child: BottomNavigationBar(
      backgroundColor: Colors.transparent, // 设为透明，让外层容器样式显示
      elevation: 0, // 移除自带阴影
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
      ],
    ),
  ),
  body: Container(
    color: Colors.white, // 页面主体背景色
    child: const Center(child: Text('页面内容')),
  ),
)

原代码失效的关键原因 #

• BottomNavigationBar默认backgroundColor不透明，直接覆盖了外层Container的圆角样式
• Scaffold自带背景色会从圆角缝隙透出，视觉上让圆角效果消失

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