如何在 Flutter 中的框装饰图像上添加不透明叠加层

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.darken
               ),
           ),
         ),