Boxdecoration適合父身高

我需要在底部 30 個像素中創建一個containerwithbackground image和 background 顏色，但我需要布局看起來像這樣：

SizedBox(
            height: 540,
            child: Container(
              width: 392.7,
              height: 510,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(25),
                    bottomRight: Radius.circular(25)),
                image: DecorationImage(
                    image: Image.network(
                      'https://ak.picdn.net/shutterstock/videos/8258557/thumb/1.jpg',
                    ).image,
                    fit: BoxFit.cover)

uj5u.com熱心網友回復：

根據您的用戶界面，我認為您必須使用堆疊而不是列使用堆疊，它將提供您想要的輸出

這是代碼示例：-

SizedBox(
      height: 540,
      child: Stack(
        children: [ 
          Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                  image:

                  /// your image
                  fit: BoxFit.fill,
                )),
          ),
          Positioned(
              bottom: 0.0,
              child: Container(
                height: 30,
                // set color and border radius as u need 
              )),
        ],
      ),
    );

uj5u.com熱心網友回復：

您可以簡單地使用Columnto 和使用另一個Container或Material... 小部件來提供額外的 30px 邊框。

  SizedBox(
              height: 540,
              child: Column(
                children: [
                  Container(
                    width: 392.7,
                    height: 510,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.grey[300],
                      borderRadius: const BorderRadius.only(
                          bottomLeft: Radius.circular(25),
                          bottomRight: Radius.circular(25)),
                      image: DecorationImage(
                          image: Image.network(
                            'https://ak.picdn.net/shutterstock/videos/8258557/thumb/1.jpg',
                          ).image,
                          fit: BoxFit.cover),
                    ),
                  ),
                  Container(
                    color: Colors.deepPurple,
                    height: 30.0,
                    width: 392.7,
                  )
                ],
              ),
            )

但是對于背景案例，您可以使用Stack它。

  SizedBox(
              height: 540,
              width: 392.7,
              child: Stack(
                children: [
                  Container(
                    color: Colors.deepPurple,
                  ),
                  Container(
                    width: 392.7,
                    height: 510,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.grey[300],
                      borderRadius: const BorderRadius.only(
                          bottomLeft: Radius.circular(25),
                          bottomRight: Radius.circular(25)),
                      image: DecorationImage(
                          image: Image.network(
                            'https://ak.picdn.net/shutterstock/videos/8258557/thumb/1.jpg',
                          ).image,
                          fit: BoxFit.cover),
                    ),
                  ),
                ],
              ),
            )

更多關于堆疊

uj5u.com熱心網友回復：

試試下面的代碼，如果需要更改，請告訴我。

SizedBox(
      height: 540,
      child: Column(
        children: [
          Expanded(
              child: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
              image: NetworkImage(
                "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
              ),
              fit: BoxFit.fill,
            )),
          )),
          Container(
            height: 30,
            color: Colors.red,
          )
        ],
      ),
    )

標籤：扑 镖 颤振布局

上一篇：Flutter-如何使scrollwidget內的小部件不可滾動？

下一篇：獲取兩個日期時間之間經過的總營業時間