Flutter - 使用 BoxDecoration 时出现容器大小问题答案

【问题标题】：Flutter - Issue with Container size when using BoxDecorationFlutter - 使用 BoxDecoration 时出现容器大小问题
【发布时间】：2021-07-18 00:44:13
【问题描述】：

我正在尝试为 Image 创建颜色叠加层以使其有点灰色。我正在使用以下代码：

                    Container(
                      padding: EdgeInsets.only(bottom: 20.0),                                          
                      decoration: new BoxDecoration(
                        color: const Color(0xff7c94b6),
                        image: new DecorationImage(
                          fit: BoxFit.fitWidth,
                          colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
                          image: new AssetImage("assets/sunset.jpg"),
                        ),
                      ),                                    
                    )

但是，如果没有 Container 子级，颜色覆盖会占据整个屏幕。

[结果如下][1]

我希望图像位于顶部，仅在图像上叠加 [像这样，但有覆盖][2]

任何想法，我错过了什么？ [1]：https://i.stack.imgur.com/ifPEu.png [2]：https://i.stack.imgur.com/4P0Cb.png

【问题讨论】：

嘿，我在下面给你写了一个答案。顺便说一句，你不需要在 Dart 中使用关键字“new”。让我知道它是否有效！

标签： flutter dart

【解决方案1】：

覆盖在整个屏幕上，因为 Container 没有约束，因此正在使用父级的约束（在您的情况下可能是屏幕大小）。当 Container 有一个孩子时，它会使用它的约束。

Column 不是必需的，但如果您想将图像贴在顶部，我假设您想在下面添加其他内容。

 Column(
    children:[
       Container(
          child: Image.asset(
          "assets/images/sunset.JPG",
          colorBlendMode: BlendMode.dstATop,
          color: Colors.black.withOpacity(0.2),
          ),
       decoration: BoxDecoration(
          color: const Color(0xff7c94b6),
          ),
        ),
      ],
    )

【讨论】：