如何在 Flutter 中使用动态大小的小部件设置 BackdropFilter答案

【问题标题】：How to set a BackdropFilter using dynamic-sized widgets in Flutter如何在 Flutter 中使用动态大小的小部件设置 BackdropFilter
【发布时间】：2019-02-14 15:43:53
【问题描述】：

我有一个列：带有文本的标题，带有图像的正文，带有文本的页脚，所有小部件都有透明背景。我想使用主图像的模糊来设置背景，但我一直走到死胡同。

在某些情况下，这很简单，但在我的场景中，图像可以是任何大小和纵横比，我需要用列包裹效果。

这是我的两次失败的尝试：

方法一

我有一个将图像作为第一项的堆栈，然后是带有 ImageFilter 模糊的 BackdropFilter，然后是我的列。这可行，但由于图像大小（可以是任何大小），图像会从列下方流出。我想将它限制在我的 Column 的高度。

return Container(
      child: Stack(
        alignment: AlignmentDirectional.topCenter,
        children: <Widget>[
          Positioned.fill(child: Image.network(_imgUrl)),
          BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
              child: Container(
                decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
              )),
          Container(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              // https://stackoverflow.com/a/41846093/3429021
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Header(),
                BodyPhoto(),
                Footer()
              ],
            ),
          ),
        ],
      ),

方法二

将列放入带有装饰图像的容器中，可以完美地调整图像大小，但我无法应用模糊效果。

（_streamItem 是我的 Column 包裹在一个容器中）

body: Container(child: _streamItem,
          decoration: new BoxDecoration(image: DecorationImage(
              image: NetworkImage(_streamItem.imgUrl),
              fit: BoxFit.cover)
          )
      )

有什么想法吗？

【问题讨论】：

标签： android widget flutter blur uiblureffect

【解决方案1】：

我认为您可以考虑使用 Positioned 小部件 - 它具有 width 和 height 属性。我们可以组合这些小部件：Positioned > ClipRect > BackdropFilter。请参考要点：https://gist.github.com/anticafe/dc84cf6488d9defea437b702b13e2749#file-blur_multiple_widgets_with_dynamic_region-dart

让我们看看this article，了解更多关于BackdropFilter的信息。

【讨论】：

【解决方案2】：

您可以明确地为包含图像的容器指定一个固定高度，这样看起来会更好。

在这个例子中，我设置了三个尺寸非常不同的图像并且渲染没有问题。

参考以下代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('So Help'),
      ),
      body: new ListView(
        children: <Widget>[
          MyContainer(
            imageUrl:
                'https://i.dailymail.co.uk/i/pix/2017/01/16/20/332EE38400000578-4125738-image-a-132_1484600112489.jpg',
          ),
          MyContainer(
            imageUrl:
                'http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg',
          ),
          MyContainer(
            imageUrl:
                'http://wackymania.com/image/2011/6/vertical-panoramic-photography/vertical-panoramic-photography-15.jpg',
          ),
        ],
      ),
    );
  }
}

class MyContainer extends StatelessWidget {
  final String imageUrl;

  MyContainer({@required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 300.0,
      child: new Stack(
        children: <Widget>[
          new Container(
            child: Image.network(
              this.imageUrl,
              width: MediaQuery.of(context).size.width,
              fit: BoxFit.cover,
            ),
          ),
          BackdropFilter(
            filter: Dui.ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: new Container(
              color: Colors.transparent,
            ),
          ),
          new Container(
            height: 300.0,
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width,
                ),
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: new Text(
                    'Header',
                    style: new TextStyle(color: Colors.white),
                  ),
                ),
                new Expanded(
                  child: Image.network(imageUrl),
                ),
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: new Text(
                    'Footer',
                    style: new TextStyle(color: Colors.white),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

【讨论】：