边框半径不适用于容器小部件内答案

【问题标题】：border radius not apply inside container widget边框半径不适用于容器小部件内
【发布时间】：2019-02-08 10:11:37
【问题描述】：

边框半径不适用于子 Container。尝试使用 SizedBox 和 Stack 小部件。我需要容器内的边框视图。

Scaffold(
  appBar: AppBar(
    title: new Text("ListView"),
  ),
  body: Center(
      child: Padding(
        padding: EdgeInsets.all(15.0),
        child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                border: Border.all(
                    color: Colors.green,
                    width: 2.0
                )
            ),
            child: Container(
              color: Colors.red,
            )
        ),
      )
  )
)

【问题讨论】：

标签： flutter

【解决方案1】：

试试这个，使用ClipRRect 并嵌套在另一个Container 中，现在您可以添加非统一边框

Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 5)],
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Container(
                        padding: EdgeInsets.all(20),
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(color: Colors.indigo, width: 5),
                          ),
                        ),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Icon(Icons.home),
                            Text("Home"),
                          ],
                        ),
                      ),
                    ),
                  )

【讨论】：

【解决方案2】：

代替

容器

小部件使用

ClipRRect

之前（不工作）：

 Center(
        child: Container(
          decoration: BoxDecoration(
            borderRadius: _getAllRoundedBorderRadius(),
          ),
          child: Hero(
            tag: "CossackHero",
            child: TweenImage(
              last: AssetImage("images/background/cossack_0.jpg"),
              first: AssetImage("images/background/c_cossack_0.jpg"),
              duration: 2,
              height: height,
            ),
          ),
        ),
      ),

之后：

Center(
        child: ClipRRect(
          borderRadius: getAllRoundedBorderRadius(),
          child: Hero(
            tag: "CossackHero",
            child: TweenImage(
              last: AssetImage("images/background/cossack_0.jpg"),
              first: AssetImage("images/background/c_cossack_0.jpg"),
              duration: 2,
              height: height,
            ),
          ),
        ),
      ),

【讨论】：

【解决方案3】：

decoration 画在孩子的身后。如果你想在容器的孩子前面应用装饰，请使用foregroundDecoration

Scaffold(
  appBar: AppBar(
    title: new Text("ListView"),
  ),
  body: Center(
      child: Padding(
        padding: EdgeInsets.all(15.0),
        child: Container(
            foregroundDecoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                border: Border.all(
                    color: Colors.green,
                    width: 2.0
                )
            ),
            child: Container(
              color: Colors.red,
            )
        ),
      )
  )
)

上面的代码在子容器前面绘制边框。请注意，即使使用foregroundDecoration 子容器仍然会有尖角。

如果您希望子容器具有圆角，则需要将borderRadius 应用于子容器或使用与父容器具有相同边框半径的ClipRRect

【讨论】：

【解决方案4】：

其他答案已经说明您需要使用ClipRRect 将边框半径应用于Container 的子小部件。

但是，Container 小部件现在具有其 clipBehaviour 属性来剪辑其子项：

Container(
  // Add the line below
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15.0),
    border: Border.all(color: Colors.green, width: 2.0)),
  child: Container(
    color: Colors.red,
  ),
);

使用此属性而不是嵌套小部件以获得干净的代码是一种很好的做法。

【讨论】：

这应该是被接受的答案。

【解决方案5】：

用这个替换你的代码

Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
  child: Padding(
    padding: EdgeInsets.all(15.0),
    child: Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            border: Border.all(
                color: Colors.green,
                width: 2.0
            )
        ),
        child: Container(
              decoration: new BoxDecoration(borderRadius: 
        BorderRadius.circular(15.0),
                        color: Colors.red,),
                    )
    ),
  )
)
)

【讨论】：

已经为父容器定义了边框。是否需要在子容器中再次添加。 ? @Zulfiqar
BorderRadius 属性定义了小部件的形状，而不是围绕它的线。如果您在父小部件上使用borderRadius，则子小部件不会继承该属性，因此它会以默认的矩形形状进行绘制。如果您希望它具有圆形边框，您也必须指定它。

【解决方案6】：

截图：

使用ClipRRect（使用 2 个Container）

ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.black,
    child: Container(
      margin: EdgeInsets.all(8),
      color: Colors.blue,
    ),
  ),
)

没有ClipRRect（使用1个Container）

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(16),
    border: Border.all(
      color: Colors.black,
      width: 4,
    ),
    color: Colors.blue,
  ),
)

【讨论】：

ClipRRect with borderRadius 是我找到的最佳解决方案，非常感谢:)

【解决方案7】：

试试

decoration: BoxDecoration(
                              gradient: new LinearGradient(
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                                stops: [0.02, 0.02],
                                colors: [Colors.red, Colors.white],
                              ),
                              borderRadius: BorderRadius.all(Radius.circular(10)),
                              color: Colors.white,
                              boxShadow: [
                                BoxShadow(color: Colors.grey, blurRadius: 5.0),
                              ],
                            ),

【讨论】：

为什么要使用渐变，这如何回答这个问题？

【解决方案8】：

const innerRadius = 15.0;
const borderWidth = 2.0;
const borderColor = Colors.green;
const color = Colors.red;
const size = 100.0;

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(innerRadius + borderWidth),
    color: borderColor,
  ),
  padding: EdgeInsets.all(borderWidth),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(innerRadius),
    child: Container(
      color: color,
      width: size,
      height: size,
    ),
  ),
);

看起来是这样的：

以及它是如何工作的：https://codepen.io/mshibanami/pen/LYyQJXa

顺便说一句，一些答案建议您使用具有decoration 的Container，包括border 和color，如下所示：

Container(
  width: size,
  height: size,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(innerRadius),
    border: Border.all(
      color: borderColor,
      width: borderWidth,
    ),
    color: color,
  ),
)

没关系，但不理想，因为内部颜色略微超出边框。所以当边框接近背景色时，可能会像这样突出：

【讨论】：

【解决方案9】：

我猜你的容器可能只是不可见，因为它没有子/高度/宽度。

尝试添加一些 Text 作为子级，或者如果您希望它扩展，可以使用 SizedBox.expand 强制。

请参阅this answer，例如在边框上。

【讨论】：

边框可见。子小部件的边框半径问题。这是图片链接putul.io/JWDFnTYTl。在子小部件中未应用我给的父小部件边框。 @MarcinSzałek