被 child 容器破坏的容器的装饰边框半径

Question

我得到了这个代码

Container(
  width: 100.w,
  decoration: BoxDecoration(
      borderRadius: BorderRadius.only(topLeft: Radius.circular(12.sp), topRight: Radius.circular(12.sp)), color: Colors.green),
  child: UnconstrainedBox(
    alignment: Alignment.centerLeft,
      child: Container(
          padding: EdgeInsets.all(12.sp),
          child: Text(
            "my Text",
            style: TextStyle(fontSize: 12.sp),
          ))),
),

结果是：

现在我想让我的 child 容器具有另一种背景颜色，采用 parent 容器的特定宽度。我使用这段代码（unconstrainedbox 这样我的宽度就不会自动变为 100%）：

Container(
  width: 100.w,
  decoration: BoxDecoration(
      borderRadius: BorderRadius.only(topLeft: Radius.circular(12.sp), topRight: Radius.circular(12.sp)), color: Colors.green),
  child: UnconstrainedBox(
    alignment: Alignment.centerLeft,
      child: Container(
        color: Colors.red,
        width: 75.w,
          padding: EdgeInsets.all(12.sp),
          child: Text(
            "my Text",
            style: TextStyle(fontSize: 12.sp),
          ))),
),

结果是：

我需要 parent 容器的 borderradius 占主导地位，而不是 'destroyed' child。我怎样才能做到这一点？我不能只向 child 添加相同的装饰，因为宽度会动态增长，在某些时候它几乎会达到 100%，这会导致右侧出现问题。

Answer 1

尝试对父容器使用 shape : Boxshape.circle 参数否则在容器的 clipbehaviour 中给出 clip.hardEdge 以便父容器保持其边界半径。

Answer 2

这可以通过容器中的 clipBehavior 属性来实现。

更新代码：

Container(
  width: 100.w,
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
      borderRadius: BorderRadius.only(topLeft: Radius.circular(12.sp), topRight: Radius.circular(12.sp)), color: Colors.green),
  child: UnconstrainedBox(
    alignment: Alignment.centerLeft,
      child: Container(
        color: Colors.red,
        width: 75.w,
          padding: EdgeInsets.all(12.sp),
          child: Text(
            "my Text",
            style: TextStyle(fontSize: 12.sp),
          ))),
),

输出：

Answer 3

据我了解，您想将子边框设置为父边框，而不使用装饰。为此，使用 ClipRRect 小部件包裹您的 UnconstrainedBox 并添加边框半径。这将掩盖你的问题。

这是一个例子：

ClipRRect(
  borderRadius: BorderRadius.only(topLeft: Radius.circular(12),),
  child: UnconstrainedBox(
            alignment: Alignment.centerLeft,
            child: Container(color: Colors.red, width: 75, padding: EdgeInsets.all(12),
            child: Text("my Text", style: TextStyle(fontSize: 12),))),),

被 child 容器破坏的容器的装饰边框半径

Decoration borderradius of container destroyed by child container

flutter

flutter-layout