美文网首页
flutter 高斯实现模糊

flutter 高斯实现模糊

作者: 天渺工作室 | 来源:发表于2020-05-24 18:48 被阅读0次

    flutter的高斯模糊其实是一个模糊化处理的Container元素块 定位在图片的上层

     ClipRRect( //切割很重要
                child: Stack(
                  overflow: Overflow.clip,
                  alignment: Alignment.center,
                  children: <Widget>[
                    Container(
    
                      width:double.infinity,
                      child:Container(//用那好种图片组件随便
                         width:double.infinity,
    
                        height:ScreenUtil.instance.setHeight(200),
                          decoration:BoxDecoration(
                            color:Color.fromRGBO(124, 127,115, .3),
                            borderRadius: BorderRadius.circular(20),
                            image:DecorationImage(
                              image: NetworkImage("${图片链接 ?? ''}"),
                              fit: BoxFit.cover,
    
                            )
                          ),
    
                        ),
                    ),
                    Positioned.fill(
                      child: BackdropFilter(
                        filter:ImageFilter.blur(sigmaX:3, sigmaY:3),//可以看源码
                        child:Container(
                          decoration:BoxDecoration(
                            color:(Color.fromRGBO(225, 225,225, 1)).withOpacity(0.06),
                            borderRadius: BorderRadius.circular(20),
                          ),
    
                        ),
                      ),
                    )
                  ],
    
    

    相关文章

      网友评论

          本文标题:flutter 高斯实现模糊

          本文链接:https://www.haomeiwen.com/subject/tyijahtx.html