如何在Flutter中使用动态大小的小部件设置BackdropFilter [英] How to set a BackdropFilter using dynamic-sized widgets in Flutter

问题描述

我有一列:带文本的标题，带图像的正文，带文本的页脚，所有小部件都有透明背景. 我想使用主图像的模糊度来设置背景，但是我一直到尽头.

在某些情况下，这很简单，但是在我的情况下，图像可以具有任何大小和纵横比，并且我需要将效果包裹在列中.

这是我两次失败的尝试:

方法1

我有一个将图像作为第一项的堆栈，然后是一个具有ImageFilter模糊的BackdropFilter，然后是我的专栏. 这可以工作，但是由于图像大小(可以是任意大小)，因此图像从列下方渗出. 我想将其限制在专栏"的高度.

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()
              ],
            ),
          ),
        ],
      ),

方法2

将该列放入带有DecorationImage的容器中，该图像可以完美调整图像的大小，但是我无法应用模糊效果.

(_ streamItem是包装在容器中的我的专栏)

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

有什么想法吗?

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

让我们看看 解决方案

I think you can consider using Positioned widget - it has width and height property. We can combine these widgets: Positioned > ClipRect > BackdropFilter. Please refer to the Gist: https://gist.github.com/anticafe/dc84cf6488d9defea437b702b13e2749#file-blur_multiple_widgets_with_dynamic_region-dart

Let take a look at this article to see more about BackdropFilter.

这篇关于如何在Flutter中使用动态大小的小部件设置BackdropFilter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！