子容器没有完全覆盖父容器，留下微小的填充

Question

我试图通过将 2 个容器相互嵌套来制作一个只有 1 个彩色边框的容器。它起作用了，但不知何故，子容器没有完全覆盖它应该覆盖的部分。另外，我不知道这是否重要，但这是在 flutter web 上

我的代码：

@override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(left: 5.0, right: 0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(3.0),
        color: Colors.teal,
        boxShadow: [
          BoxShadow(
             color: Color.fromRGBO(162, 181, 183, 0.3),
             spreadRadius: 2,
             blurRadius: 30,
             offset: Offset(-1, -1), 
          ),
        ],
      ),
      child: Container(
        padding: const EdgeInsets.fromLTRB(20.0, 10.0, 30.0, 15.0),
        margin: EdgeInsets.zero,
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(3.0),
            bottomRight: Radius.circular(3.0),
          ),
          color: Colors.white,
        ),
        child: SomeWidget(),
      ),
    );
  }
}

我得到的：

我想要的：

基本上我想删除右侧显示父容器背景颜色的微小填充。

Answer 1

好像Container默认有很薄的透明Border。如果你把里面的Container.decoration.border设置成Border.all(color: Colors.white)，那条很细的线就会消失。

Container(
....
child: Container(
    ....
    decoration: BoxDecoration(
      .....
      border: Border.all(color: Colors.white),
    )
  )
)

Answer 2

使用 Row() 小部件将蓝色细线和白色 Container() 并排放置。那应该符合您的目的。您也可以为细蓝线使用 Divider() 小部件。

另一种方法是利用堆栈，将这两个容器放在彼此的顶部。您可以指定两个容器的位置，因此不会有任何填充问题。

Answer 3

你可以使用这个：

ClipRRect(
            borderRadius: BorderRadius.circular(3.0),
            child: Container(
              padding: const EdgeInsets.only(left: 5.0),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                  left: BorderSide(
                      color: Colors.teal,
                      width: 10),
                ),
                // color: Colors.teal,
                boxShadow: [
                  BoxShadow(
                    color: Color.fromRGBO(162, 181, 183, 0.3),
                    spreadRadius: 2,
                    blurRadius: 30,
                    offset: Offset(-1, -1),
                  ),
                ],
              ),
              child: Container(
                padding: const EdgeInsets.fromLTRB(20.0, 10.0, 00.0, 15.0),
                margin: EdgeInsets.zero,
                decoration: BoxDecoration(
                  // borderRadius: BorderRadius.circular(3.0),

                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(3.0),
                    bottomRight: Radius.circular(3.0),
                  ),
                  color: Colors.white,
                ),
                child: Container(),
              ),
            ),
          )

Answer 4

我很困惑这个问题是如何得到一些答案的，目前接受的一个方法是在 Container 内部使用 Container，在 ClipRRect 内部填充，而 你只需要一个容器来创建单边边框。

 Container(
                  decoration: BoxDecoration(
                    border: Border(
                      left: BorderSide(
                        color: Colors.teal,
                        width: 3.0,
                      ),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Color.fromRGBO(162, 181, 183, 0.3),
                        spreadRadius: 2,
                        blurRadius: 30,
                        offset: Offset(-1, -1),
                      ),
                    ],
                  ),
                  child:  someWidget
                ),

另一件事是你只能给一个统一的边框BorderRadius。如果你需要这个，那么使用 ClipRRect.

另请注意，已接受的答案建议在其他小部件之上使用 ClipRRect，因此它会剪切掉它之外的所有内容，因此会破坏容器的阴影。

要包含您想要的所有元素，您需要：带阴影的容器 -> cliprrect -> 带有一侧边框的容器 -> 子部件

Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Color.fromRGBO(162, 181, 183, 0.3),
                spreadRadius: 2,
                blurRadius: 30,
                offset: Offset(-1, -1),
              ),
            ],
    ),
          child: ClipRRect(
            borderRadius:  BorderRadius.circular(5.0),
            child: Container(
              decoration: BoxDecoration(
                border: Border(
                  left: BorderSide(
                    color: Colors.teal,
                    width: 3.0,
                  ),
                ),

              ),
              child:  Container(height: 200, width: 100, color: Colors.white),
            ),
          ),
        ),

子容器没有完全覆盖父容器，留下微小的填充

Child container doesn't cover parent container entirely, leaving a tiny padding

flutter

flutter-layout

flutter-web