为不均匀的边界提供一个borderRadius答案

【问题标题】：Give a borderRadius for non-uniform borders为不均匀的边界提供一个borderRadius
【发布时间】：2021-12-06 12:43:20
【问题描述】：

我需要一个仅在顶部、底部和右侧有边框的容器。此外，bottomRight 和 topRight 角应该是圆角。

这是我的一些上下文代码：

Container(
  decoration: BoxDecoration(
    color: Colors.black.withOpacity(0.45),
    borderRadius: BorderRadius.only(
      bottomRight: Radius.circular(20),
      topRight: Radius.circular(20)),
    border: Border(
      top: BorderSide(
        color: Colors.white.withOpacity(0.45),
        width: 4.0),
      bottom: BorderSide(
        color: Colors.white.withOpacity(0.45),
        width: 4.0),
      right: BorderSide(
        color: Colors.white.withOpacity(0.45),
        width: 4.0),
    ),
    ...

使用此代码，我会产生以下错误，这要求borderRadius 具有统一的边框（在这种情况下我不希望这样做）。

要规避的错误：

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during paint():
A borderRadius can only be given for a uniform Border.

【问题讨论】：

stackoverflow.com/a/61613471/3454744
@Xihuny 这仅适用于非透明颜色。

标签： flutter flutter-layout

【解决方案1】：

我有两个选择：

1、您需要了解如何创建CustomPainter。您可以通过创建画图和路径来自定义边框。

2、使用两个Container。

           Container(
                  height: 48,
                  width: 200,
                  padding: EdgeInsets.all(4).copyWith(left: 0),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.45),
                    borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(20),
                        topRight: Radius.circular(20)),
                  ),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.black.withOpacity(0.45),
                    borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(20),
                        topRight: Radius.circular(20)),
                  ),
                ),
              ),

【讨论】：

谢谢，但是，您的第二个解决方案没有达到我想要的效果。替换边框的“外部”容器的填充颜色也会扭曲黑色，不透明度为 45%。我需要 Colors.black.withOpacity(0.45) 背景和 Colors.white.withOpacity(0.45) 边框。

【解决方案2】：

我找到了一个解决方案，它也适用于透明色：

用Stack() 包裹容器并使用另一个Container() 来隐藏左边框。为了达到预期的效果容器颜色相同并调整高度（从第一个容器中减去 2 倍的边框宽度得到第二个容器的高度）。
要将"Border"-Container 定位到左侧，请将alignment: Alignment.centerLeft, 添加到堆栈中。
为了在此自定义容器中显示文本，您需要将 Child-Widget（您将直接添加到第一个容器的子参数）作为单独的小部件定位到 Row() 与您的 @987654328 @ 和 "Border"-Container 作为它的孩子。
要正确对齐Child-Widget，请使用行的mainAxisAlignment: MainAxisAlignment.spaceBetween, 并将Child-Widget 与Padding() 包裹起来，以确保"Border"-Container 将贴在左边框上。

这是所需小部件的代码：

  Stack(
          alignment: Alignment.centerLeft,
          children: [
            Container(
              height: 493.0,
              width: 1353.0,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.white, width: 4.0),
                color: Colors.black.withOpacity(0.45),
                borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(20),
                  topRight: Radius.circular(20),
                ),
                boxShadow: [
                  CustomBoxShadow(
                    color: Colors.white,
                    blurRadius: 15.0,
                    blurStyle: BlurStyle.outer,
                  )
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // Acts as the left border
                Container(
                  width: 4.0,
                  height: 485.0,
                  color: Colors.black,
                ),
                SizedBox(width: 115.0),
                Padding(
                  padding: const EdgeInsets.only(
                    right: 75.0,
                  ),
                  child: Text(
                    "Add the child widget here",
                    style: TextStyle(color: Colors.white),
                  ), // Add text here
                )
              ],
            )
          ],
        ),

仅供参考：如果你想要一个 BoxShadow，你会遇到一个问题，即它会改变你的透明容器颜色，就像 Flutter绘制小部件后面的阴影。我在下面添加了一个 CustomBoxShadow，它允许更改默认的 blurStyle。使用blurStyle: BlurStyle.outer，保持您想要的容器透明背景颜色。代码来自这里：SO-Link。

class CustomBoxShadow extends BoxShadow {
  final BlurStyle blurStyle;

  const CustomBoxShadow({
    Color color = const Color(0xFF000000),
    Offset offset = Offset.zero,
    double blurRadius = 0.0,
    this.blurStyle = BlurStyle.normal,
  }) : super(color: color, offset: offset, blurRadius: blurRadius);

  @override
  Paint toPaint() {
    final Paint result = Paint()
      ..color = color
      ..maskFilter = MaskFilter.blur(this.blurStyle, blurSigma);
    assert(() {
      if (debugDisableShadows) result.maskFilter = null;
      return true;
    }());
    return result;
  }
}

【讨论】：