Boxdecoration 适合父母身高答案

【问题标题】：Boxdecoration fit parent heightBoxdecoration 适合父母身高
【发布时间】：2021-12-29 17:26:17
【问题描述】：

我需要用background image 和底部 30 像素的背景颜色制作一个 container，但我需要这样的布局：

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)

【问题讨论】：

您可以添加代码的输出吗？

标签： flutter dart flutter-layout

【解决方案1】：

根据您的用户界面，我认为您必须使用堆栈而不是列使用堆栈，它将提供您想要的输出

这里是代码示例：-

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

【讨论】：

【解决方案2】：

您可以简单地使用 Column 并使用另一个 Container 或 Material... 小部件来提供额外的 30 像素边框。

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

更多关于Stack

【讨论】：

【解决方案3】：

试试下面的代码，如果需要更改，请告诉我。

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

【讨论】：