Boxdecoration 适合 parent 高度

Question

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

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)

Answer 1

您可以简单地使用 Column 并使用另一个 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),
                    ),
                  ),
                ],
              ),
            )

更多关于Stack

Answer 2

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

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

Answer 3

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

这是代码示例：-

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

Boxdecoration 适合 parent 高度

Boxdecoration fit parent height

dart

flutter

flutter-layout