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

Posted 2023-02-23

【中文标题】如何在 Flutter 中的盒子装饰上的图像上添加不透明覆盖

【英文标题】：How can I add an opaque overlay over the image on box decoration in Flutter

【发布时间】：2020-05-25 05:22:25

【问题描述】：

我正在努力想出解决这个看似简单的任务的方法。我需要在 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 */,
                  ),

【问题讨论】：

试试颜色(0xFF1F1F98).withOpacity(0.5)

【参考方案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
               ),
           ),
         ),

【讨论】：

我使用了 BlendMode.darken 并将 withOpacity 设置为 0.7，它可以工作！谢谢