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))
            ]));
      }

    效果:

  • 相关阅读:
    TCP三次握手与四次挥手
    centos7快捷键
    关于学习简单讲解的个人观点
    继承与派生
    python封装
    python之面向对象编程
    python之re模块
    python之hashlib、suprocess模块
    python之shelve、xml、configparser模块
    python之json、pickle模块
  • 原文地址:https://www.cnblogs.com/lude1994/p/15266641.html
Copyright © 2011-2022 走看看