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

    效果:

  • 相关阅读:
    Arbitrage
    Big Event in HDU
    敌兵布阵
    Eddy's picture
    A Walk Through the Forest 最短路径+深搜
    Holding Bin-Laden Captive! 母函数
    Moving Tables 贪心
    Fire Net
    Number Sequence
    Find your present! map
  • 原文地址:https://www.cnblogs.com/lude1994/p/15266641.html
Copyright © 2020-2023  润新知