Question

我正在努力为这个看似简单的任务提供解决方案。我需要在Flutter中的图像上覆盖不透明的图像。我尝试以不同的方式添加叠加，但是图像始终会叠加在我所做的任何事情上。请注意，我需要图像上的不透明覆盖物，而不是图像和覆盖物上的标题或文本。或者，我可能有黑色背景并使图像不透明，从而可能会产生与我想要达到的效果相同的效果？在我开始深入研究之前，我想看看专家们是如何做到这一点的。谢谢大家的建议。

                  Container(
                    width: 320.0,
                    height: 180.0,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: NetworkImage(
                            news[index]['jetpack_featured_media_url'],
                        ),
                        fit: BoxFit.cover,
                      ),
                      color: Color(0xFF1F1F98),
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        colors: [Colors.black, Colors.black],
                        stops: [0.0, 0.5]
                      ),
                      borderRadius: new BorderRadius.only(
                          topLeft: const Radius.circular(8.0),
                          topRight: const Radius.circular(8.0)
                      ),
                    ),
                    child: Padding(
                        padding: const EdgeInsets.all(20.0),
                        child: Text(
                            cardTitle(news[index]['title']['rendered']),
                            style: kCardOverlayTitleTextStyle
                        )
                    ) /* add child content here */,
                  ),

Answer 1

您可以使用DecoratedImage窗口小部件中可用的ColorFilter选项

Container(
          width: 320.0,
          height: 180.0,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(news[index['jetpack_featured_media_url']),
              fit: BoxFit.cover,
               colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.2),
                BlendMode.softLight
               ),
           ),
         ),

如何在Flutter的盒子装饰上的图像上添加不透明的覆盖

1 个答案: