Flutter 使用ClipRRect实现底部导航栏时如何设置透明圆角

圆角位置不透明是因为Scaffold默认不会让页面内容延伸到底部导航栏下方，同时BottomNavigationBar自带不透明背景和阴影，导致圆角裁剪区域露出的是Scaffold的空白背景，而非下层的页面内容。

• 给当前使用的Scaffold组件添加extendBody: true属性，让页面主体内容延伸到底部导航栏下方，圆角区域可以透出下层页面内容
• 给BottomNavigationBar设置backgroundColor: Colors.transparent和elevation: 0，关闭组件自带的不透明背景和阴影，避免遮挡圆角效果
• 如果需要给导航栏添加自定义实色背景，可以在ClipRRect内部嵌套一层带背景色的Container，再将BottomNavigationBar作为Container的子组件

Scaffold(
  // 关键配置：允许页面内容延伸到底部导航栏下方
  extendBody: true,
  body: const YourPageBodyWidget(), // 替换为你的页面主体组件
  bottomNavigationBar: ClipRRect(
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(30.0),
      topRight: Radius.circular(30.0),
    ),
    child: Container(
      // 这里设置你需要的导航栏背景色
      color: Colors.white,
      child: BottomNavigationBar(
        // 关闭自带背景和阴影
        backgroundColor: Colors.transparent,
        elevation: 0,
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    ),
  ),
)

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