flutter 背景图片毛玻璃效果

╰+攻爆jí腚メ 2021-07-24 11:44 625阅读 0赞

1、引入图片滤镜文件
    		import 'dart:ui';
    		
    2、在Stack组件中堆叠，产生图标毛玻璃效果
    	若不使用图片毛玻璃，仅仅是背景模糊透明，用Opacity组件就可实现
    		第一个组件为图片
    		第二个组件为图片产生毛玻璃效果，并设置图片上的组件
    			
    		BackdropFilter( 背景过滤器
                 filter: ImageFilter.blur(sigmaX:100.0,sigmaY:5.0),   处理图片的模糊度，在最外层包裹截切组件ClipRect,可以将图片的模糊区域限制在子组件的大小区域中
                 child: 组件
             )

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
代码示例:

Container(
          // width: double.infinity,
           child:Stack(
             children: <Widget>[
               ConstrainedBox( //约束盒子,添加额外的约束条件到子组件上
                  constraints: BoxConstraints.expand(),  //随着子元素扩展
                  child: 
                  Image.asset("images/2.0x/钢铁侠4.jpg"),
    
               ),
              
               Center(
                 child: ClipRect( //使图片模糊区域仅在子组件区域中
                   child: BackdropFilter( //背景过滤器
                       filter: ImageFilter.blur(sigmaX:5.0,sigmaY:5.0),   //设置图片模糊度
                       child: Opacity( //悬浮的内容
                         opacity: 0.5,
                         child: Container(
                           width: 200.0,
                           height: 200.0,
                           color:Colors.grey.shade200 ,
                           child: Center(
                             child: Text("大Jeff"),
                           ),
                         ),
                       ),
                   ),
                 ),
               )
             ],
           ),

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/6440e5feb9bd441084ea102a63a18f25.png