Question

边界半径不适用于子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,
            )
        ),
      )
  )
)

Answer 1

截图：

使用 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,
  ),
)

Answer 2

以此替换您的代码

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

Answer 3

尝试一下，使用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"),
                          ],
                        ),
                      ),
                    ),
                  )

Answer 4

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

尝试添加一些Flux<DataBuffer> buffers = //...; int maxSize = //...; AtomicInteger currentSize = new AtomicInteger(0); Flux<Flux<DataBuffer>> bufferWindow = buffers.windowUntil(buf -> { if (currentSize.addAndGet(buf.readableByteCount()) < maxSize) { return false; } currentSize.set(0); return true; }); WebClient.create() .post() .body((outputMessage, context) -> outputMessage.writeAndFlushWith(bufferWindow)) .retrieve();作为孩子，或者如果您想扩展它，可以用SizedBox.expand强制。

例如this answer（关于边界）。

Answer 5

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

Answer 6

尝试

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

Answer 7

代替

容器

小工具使用

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

Answer 8

其他答案已经说明您需要使用 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,
  ),
);

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

Answer 9

你走在正确的道路上。此外，在内部 borderRadius 中也设置 Container：

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: Container(
    width: size,
    height: size,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(innerRadius),
      color: color,
    ),
  ),
);

这是它的样子：

及其工作原理：https://codepen.io/mshibanami/pen/LYyQJXa

顺便说一句，有些答案建议您使用一个 Container ，其中包含 border 和 color 的装饰，如下所示：

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

可以，但并不理想，因为内部颜色看起来稍微超出了边框。所以当边框接近背景色时，可能会像这样突出：

边界半径不适用于容器小部件

9 个答案: