Flutter中如何实现底部导航栏容器模糊而非全屏模糊？

这个问题的核心在于BackdropFilter的模糊效果会作用于它所在层级下方的所有内容，如果没有对它的范围进行裁剪，模糊就会不受控制地扩散到整个屏幕。咱们可以通过两步简单的调整来修复：

1. 添加裁剪组件限制模糊范围 #

给BackdropFilter套上一个ClipRRect（或其他适配你布局的裁剪组件），让模糊效果被严格限制在指定的圆角容器内，避免溢出到屏幕其他区域。

2. 给容器添加半透明背景 #

原来的Container是完全透明的，加上半透明背景不仅能让毛玻璃质感更自然，还能进一步明确模糊区域的边界，强化视觉隔离效果。

修改后的完整代码 #

class BottomNavBar extends StatelessWidget { 
  const BottomNavBar({ Key key, @required this.controller, }) : super(key: key); 
  final BottomBarController controller; 
  @override 
  Widget build(BuildContext context) { 
    return BottomExpandableAppBar( 
      appBarHeight: 0, 
      controller: controller, 
      expandedHeight: 100, 
      horizontalMargin: 10, 
      bottomOffset: 0, 
      expandedBackColor: Colors.transparent, 
      expandedBody: Padding( 
        padding: const EdgeInsets.only(left: 15.0, right: 15, top: 10), 
        child: MenuDrawer(), 
      ), 
    ); 
  } 
} 

class MenuDrawer extends StatelessWidget { 
  const MenuDrawer({ Key key, }) : super(key: key); 
  @override 
  Widget build(BuildContext context) { 
    // 用ClipRRect裁剪模糊范围，和内部容器圆角保持一致
    return ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(20)),
      child: BackdropFilter( 
        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), 
        child: Container( 
          // 添加半透明背景，增强毛玻璃质感并限制模糊边界
          decoration: BoxDecoration( 
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: Colors.white.withOpacity(0.3),
          ), 
          child: Row( 
            mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
            children: <Widget>[ 
              Card( 
                child: Padding( 
                  padding: const EdgeInsets.all(4.0), 
                  child: Icon(Icons.save, size: 45, color: Colors.black), 
                ), 
                elevation: 30, 
                shape: RoundedRectangleBorder( 
                  borderRadius: BorderRadius.circular(15.0), 
                ), 
              ), 
              Card( 
                child: Padding( 
                  padding: const EdgeInsets.all(4.0), 
                  child: Icon(Icons.save, size: 45, color: Colors.black), 
                ), 
                elevation: 30, 
                shape: RoundedRectangleBorder( 
                  borderRadius: BorderRadius.circular(15.0), 
                ), 
              ), 
              Card( 
                child: Padding( 
                  padding: const EdgeInsets.all(4.0), 
                  child: Icon(Icons.list, size: 45, color: Colors.black), 
                ), 
                elevation: 30, 
                shape: RoundedRectangleBorder( 
                  borderRadius: BorderRadius.circular(15.0), 
                ), 
              ), 
              Card( 
                child: Padding( 
                  padding: const EdgeInsets.all(4.0), 
                  child: Icon(Icons.person, size: 45, color: Colors.black), 
                ), 
                elevation: 30, 
                color: Colors.amber, 
                shape: RoundedRectangleBorder( 
                  borderRadius: BorderRadius.circular(15.0), 
                ), 
              ) 
            ], 
          ), 
        ), 
      ),
    ); 
  } 
}

额外说明 #

• ClipRRect的圆角参数要和内部Container的圆角保持一致，这样裁剪后的边缘才会平滑自然。
• 半透明背景的透明度可以根据设计需求调整（比如0.2到0.5区间都能呈现不错的毛玻璃效果）。
• 如果你的底部栏是自定义形状，也可以用ClipPath来实现更灵活的裁剪范围。

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