时间戳

首页 > 解决方案 > 如何将 Flutter 中的一个小部件与另一个小部件叠加，不透明度设置为相乘？

flutter - 如何将 Flutter 中的一个小部件与另一个小部件叠加，不透明度设置为相乘？

问题描述

这就是我想要实现的目标：

目标

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

标签： flutterdartflutter-layout

解决方案

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

编辑：如果你想使用多重混合，我想到的唯一选项是用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)))
        ])
      ])

推荐阅读