zoukankan      html  css  js  c++  java
  • flutter BackdropFilter的毛玻璃效果使用

    参考:https://www.imooc.com/article/289434

    在dom中引用_itemWid()

     Widget _imageBackWid() {
        return Center(
            child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
              Row(children: <Widget>[
                _itemWid(Colors.red.withOpacity(0.1), 4.0),
                _itemWid(Colors.white.withOpacity(0.1), 8.0),
              ]),
              Row(children: <Widget>[
                _itemWid(Colors.white.withOpacity(0.1), 4.0),
                Container(
                     MediaQuery.of(context).size.width * 0.5,
                    height: MediaQuery.of(context).size.width * 0.5,
                    child: BackdropFilter(
                        filter: ImageFilter.blur(sigmaX: 4.0, sigmaY: 4.0),
                        child: Container(
                            color: Colors.white.withOpacity(0.1),
                            child: Padding(
                                padding: EdgeInsets.all(14.0),
                                child: Image.asset('assets/images/renzhengfail.png')))))
              ])
            ]));
      }
    
      Widget _itemWid(color, blur) {
        return Container(
             MediaQuery.of(context).size.width * 0.5,
            height: MediaQuery.of(context).size.width * 0.5,
            child: Stack(children: <Widget>[
              Padding(
                  padding: EdgeInsets.all(14.0),
                  child: Image.asset('assets/images/renzhengfail.png')),
              BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
                  child: Container(color: color))
            ]));
      }

    效果:

  • 相关阅读:
    c# 使用 Read 读取数据块
    C# TCP/IP通信,Socket通信例子
    c# virtual 关键字 虚方法
    统计图
    oauth2.0 判断接口是否允许跨域
    OI常用模板合集
    CSP2021游记
    8.16 树上问题模拟赛总结
    8.15 图论模拟赛垫底记
    8.14 字符串模拟赛总结
  • 原文地址:https://www.cnblogs.com/lude1994/p/15266641.html
Copyright © 2011-2022 走看看