子容器没有完全覆盖父容器，留下一个很小的填充答案

【问题标题】：Child container doesn't cover parent container entirely, leaving a tiny padding子容器没有完全覆盖父容器，留下一个很小的填充
【发布时间】：2021-08-31 22:03:09
【问题描述】：

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

我的代码：

@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(),
      ),
    );
  }
}

我得到了什么：

我想要什么：

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

【问题讨论】：

您是否尝试删除右侧填充 right: 0 ？我无法提出您的问题。我正在从您的代码中获得您正在寻找的确切结果。因为 0 仍然是一个值。
最初并没有那个零，我添加它是为了强调它没有做任何事情
@FaiiziiAwan 当外部Container 足够小时出现问题。如果它很大（例如，与屏幕一样大），则线条非常难以看到（因此我得出了关于边框的结论）。
仍然无法重现。我将它包裹在 50x50 的 sizebox 中，但在右侧看不到任何线条 :-(

标签： flutter flutter-layout flutter-web

【解决方案1】：

我很困惑这个问题是如何得到一些答案并且目前接受的一个是在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),
            ),
          ),
        ),

【讨论】：

这应该是公认的答案。我太笨了，之前没有想到这一点。

【解决方案2】：

你可以用这个：

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

【讨论】：

不错的帖子。为什么需要使用clip？
我用剪辑给容器提供了圆形边框，并且只从容器的左侧改变了颜色
伟大的弗兰肯。 @Fatima然后我认为不需要使用内半径。你说什么？
我忘了说，如果有人遇到和我一样的问题，ClipRRect 会移除阴影，所以你必须用另一个容器包裹 ClipRRect 并为那个容器设置阴影

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

看来Container默认有一个很薄的透明Border。如果将内部的Container.decoration.border设置为Border.all(color: Colors.white)，那么很细的线就会消失。

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

【讨论】：

奇数。它对我有用。尝试将边框的宽度增加到 0.5 到 1 之间。这可能不是最佳解决方案，但它可以在没有任何重大问题的情况下工作。 @FrankenFrank
这很奇怪，因为任何比父内容更暗的颜色都会覆盖它，但更亮的（例如白色）不会