Flutter - 使用 BoxDecoration 時出現容器大小問題

Question

我正在嘗試為 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

Answer 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),
          ),
        ),
      ],
    )