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

Question

这是我要实现的目标：

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

Answer 1

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

编辑：如果您想使用我想到的仅多重混合选项，请使用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 Widget，该控件可让您将子项彼此叠加。 您可以将基础图像放在底部，而将其过滤在其上方。