如何在Flutter中的窗口小部件与不透明度设置为相乘的另一个窗口小部件重叠？

Question

这是我想要实现的：

我知道图像小部件上有一个colorBlendMode，但是它不允许我为图像的一部分上色，而只是整个上色。可以在一定百分比的图像上叠加颜色吗？

Answer 1

对于颜色叠加，您可以简单地将Container与具有不透明性的颜色一起使用。然后，如果将图像和容器放入堆栈中，将得到与您相同的结果。

编辑： 如果我想使用我想到的“仅混合混合”选项，请使用colorFiler拍摄两张图片，不使用colorFiler拍摄两张图片，然后将它们放在一起。但这绝对不是干净的解决方案。

与您的图片具有相似结果的代码：

Column(children: <Widget>[
        Stack(children: <Widget>[
          Image(
              image: NetworkImage('https://picsum.photos/600?image=9'),
              colorBlendMode: BlendMode.multiply,
              color: Colors.green),
          AspectRatio(
              aspectRatio: 2 / 1,
              child: new Container(
                  decoration: new BoxDecoration(
                      image: new DecorationImage(
                          fit: BoxFit.fitWidth,
                          alignment: FractionalOffset.topCenter,
                          image: NetworkImage(
                            'https://picsum.photos/600?image=9',
                          ))))),
        ]),
        Stack(children: <Widget>[
          Image(
              image: NetworkImage(
                  'https://www.solidbackgrounds.com/images/1920x1080/1920x1080-white-solid-color-background.jpg'),
              height: 100,
              fit: BoxFit.fitWidth,
              width: MediaQuery.of(context).size.width,
              colorBlendMode: BlendMode.multiply,
              color: Colors.green),
          Center(
              child: Text('5',
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white, fontSize: 40)))
        ])
      ])

Answer 2

我绝对会考虑研究Stack小部件，该小部件可让您将子级彼此叠加。您可以将基础图像放在底部，而将其过滤在其上方。