如何在Flutter中绘制自定义圆角矩形边框（ShapeBorder）？

Question

我想扩展ShapeBorder类以添加一些功能。但是，在尝试使用paint方法时，我发现了一些意外的问题：

边框的角和矩形的角似乎不匹配。我使用了以下代码：

class CustomRoundedRectangleBorder extends ShapeBorder {

  final double borderWidth;
  final BorderRadius borderRadius;

  const CustomRoundedRectangleBorder({
    this.borderWidth: 1.0,
    this.borderRadius: BorderRadius.zero,
  })
      : assert(borderRadius != null);

  @override
  EdgeInsetsGeometry get dimensions {
    return new EdgeInsets.all(borderWidth);
  }

  @override
  ShapeBorder scale(double t) {
    return new CustomRoundedRectangleBorder(
      borderWidth: borderWidth * (t),
      borderRadius: borderRadius * (t),
    );
  }

  @override
  ShapeBorder lerpFrom(ShapeBorder a, double t) {
    assert(t != null);
    if (a is CustomRoundedRectangleBorder) {
      return new CustomRoundedRectangleBorder(
        borderWidth: ui.lerpDouble(a.borderWidth, borderWidth, t),
        borderRadius: BorderRadius.lerp(a.borderRadius, borderRadius, t),
      );
    }
    return super.lerpFrom(a, t);
  }

  @override
  ShapeBorder lerpTo(ShapeBorder b, double t) {
    assert(t != null);
    if (b is CustomRoundedRectangleBorder) {
      return new CustomRoundedRectangleBorder(
        borderWidth: ui.lerpDouble(borderWidth, b.borderWidth, t),
        borderRadius: BorderRadius.lerp(borderRadius, b.borderRadius, t),
      );
    }
    return super.lerpTo(b, t);
  }

  @override
  Path getInnerPath(Rect rect, { TextDirection textDirection }) {
    return new Path()
      ..addRRect(borderRadius.resolve(textDirection).toRRect(rect).deflate(
          borderWidth));
  }

  @override
  Path getOuterPath(Rect rect, { TextDirection textDirection }) {
    return new Path()
      ..addRRect(borderRadius.resolve(textDirection).toRRect(rect));
  }

  @override
  void paint(Canvas canvas, Rect rect, { TextDirection textDirection }) {
    rect = rect.deflate(borderWidth / 2.0);

    Paint paint;
    final RRect borderRect = borderRadius.resolve(textDirection).toRRect(rect);
    paint = new Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = borderWidth;
    canvas.drawRRect(borderRect, paint);
  }
}

然后创建如下矩形：

new Container(
              height: 100.0,
              width: 200.0,
              padding: new EdgeInsets.all(10.0),
              decoration: new ShapeDecoration(
                color: Colors.black,
                shape: new CustomRoundedRectangleBorder(
                  borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
                  borderWidth: 10.0,
                ),
                // side: new BorderSide(color: Colors.white)
              ),
              child: new Center(child: new Text("My Button"),),
            ),

我觉得Flutter源代码采取了类似的方法，但也许我没有看到什么。

编辑 将我的paint样式更改为PaintingStyle.fill，因此绘制一个矩形覆盖原始矩形而不是边框，我似乎确实得到了正确的边框：

  void paint(Canvas canvas, Rect rect, { TextDirection textDirection }) {

//    rect = rect.deflate(borderWidth / 2.0);

    Paint paint;
    final RRect borderRect = borderRadius.resolve(textDirection).toRRect(rect);
    paint = new Paint()
      ..color = Colors.red.withOpacity(0.25)
      ..style = PaintingStyle.fill
      ..strokeWidth = borderWidth;
    canvas.drawRRect(borderRect, paint);
  }

我仍然困惑于如何做到这一点...

- Bram Vanbilsen

---

我已经找到了解决方案。我的代码太乱了，无法发布，而且我现在也没有时间整理它。但是一旦我有时间，我会发布它的！ - Bram Vanbilsen

你找到时间了吗？XD - Adithya Shetty

Answer 1

您可以使用 canvas.drawRRect ：

canvas.drawRRect(RRect.fromRectAndRadius(Rect.fromLTWH(size.width / 2 - gap - smallMarkWidth - 15,gap * 8,gap + 70,gap * 5,),Radius.circular(15.0)),backgroundPaint);

- vivek nakalgaonkar

---

在上述解决方案中，“gap”和“smallMarkWidth”是什么？ - ANAND GUPTA

嗨，我想做这个，但宽度和高度对我来说不够。你能帮我增加宽度吗？当我改变宽度时，半径不起作用。我无法解决这个问题。 - Handelika

Answer 2

应使用canvas.drawPath而非drawRect。

Paint paint = new Paint()
  ..color = borderColor
  ..style = PaintingStyle.stroke
  ..strokeWidth = borderWidth;

canvas.drawPath(getOuterPath(rect), paint);

如果你只需要一个边框，那么仅需使用

 @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    return new Path()
      ..fillType = PathFillType.evenOdd
      ..addPath(getOuterPath(rect), Offset.zero);
  }

- Thomas

---

我用drawRect得到了一个非常好的解决方案。我现在非常忙，代码太乱了，无法分享，但是当我有时间整理它时，我会发布它！ - Bram Vanbilsen

@seenickcode 我认为他们可能只是使用了两个 canvas.drawRects。我曾经有同样的问题，最终创建了一个 RRect.fromRectAndRadius()，并将其传递到两个 canvas.drawRect() 中。第一个 drawRect 使用了 PaintingStyle.fill 样式，而第二个 drawRect() 则使用了 PaintingStyle.stroke 样式。第二个覆盖了第一个。我没有使用 drawPath()。 - Mary

Answer 3

这对我起作用了！

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration:
      ShapeDecoration(
          shape: RoundedRectangleBorder(
          side:new  BorderSide(color: Color(0xFF2A8068)), 
          borderRadius: new BorderRadius.all(new Radius.circular(4))),
          color: Color(0xFF2A8068)),
      child: Theme(
        data: Theme.of(context).copyWith(
            buttonTheme: ButtonTheme.of(context).copyWith(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap)),
        child: OutlineButton(
          shape:  RoundedRectangleBorder(
              side:new  BorderSide(color: Color(0xFF2A8068)), //the outline color
              borderRadius: new BorderRadius.all(new Radius.circular(4))),
          child: Text(
            "ابدأ", //your text here
             style: new TextStyle(
              color: Colors.white, //your textColor
            ),
          ),
          onPressed: () => {},
        ),
      ),
    );

- Abdifatah Mohamed

Answer 4

绘制带有阴影的自定义圆角边框。

new Container(

                decoration:
                new BoxDecoration(
                  borderRadius: new BorderRadius.circular(10.0),
                  color: Colors.white,

                  boxShadow: [
                    new BoxShadow(
                        color: Colors.grey,
                        blurRadius: 3.0,
                        offset: new Offset(1.0, 1.0))
                  ],
                ),
)

如何绘制无阴影的自定义圆角边框。

new Container(
        decoration:
                new BoxDecoration(
                  borderRadius: new BorderRadius.circular(10.0),
                  color: Colors.grey,


                ),
)

- Nikhat Shaikh

Answer 5

您可以使用ClipRRect小部件来代替drawRect，它非常简单易用。

ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: Container(),
      ),

- User

Answer 6

我发布了一个基于@Bram Vanbilsen的代码的简单包，它可以让你控制如何绘制形状和边框，以任何你想要的方式。

该包可以在pub.dev上找到，链接为：https://pub.dev/packages/custom_rounded_rectangle_border。

- lekanbaruwa