如何将容器放入容器中，边框完全重叠？答案

【问题标题】：How to put a container inside a container with the borders overlaying exactly?如何将容器放入容器中，边框完全重叠？
【发布时间】：2021-12-10 05:08:47
【问题描述】：

How it should look like

我想创建一个容器，底部有另一个容器。因为我在它们两个中都使用了边框，所以我可以看到它们没有重叠。看起来像这样：

有没有办法让它看起来像第一张图片？

How it actually looks

我当前的代码如下所示：

                    Container(
                      height: 364.h,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(
                          width: 5.r,
                        ),
                      ),
                      child: Expanded(
                        child: Align(
                          alignment: FractionalOffset.bottomCenter,
                          child: Container(
                            height: 50.h,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              border: Border.all(
                                width: 5.r,                            
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),

【问题讨论】：

使用DecoratedBox 而不是外部Container - 文档说：“在其子绘制之前或之后绘制装饰的小部件。容器通过边框的宽度插入其子代; 这个小部件没有。”

标签： flutter user-interface containers

【解决方案1】：

您可以使用 Stack 并使用 alignment 在底部对齐其子项。

 Stack(
  alignment: Alignment.bottomCenter,
  children: [
    Container(
      height: 364.0,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        border: Border.all(
          width: 5.0,
        ),
      ),
    ),
    Container(
        height: 50.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(
            width: 5.0,
          ),
        ),
      )
  ],
);

【讨论】：