How to draw a custom rounded rectangle border ( ShapeBorder ), in Flutter?

在Flutter中，如果你想要绘制一个自定义的圆角矩形边框，你可以通过扩展ShapeBorder类来创建一个全新的边框类。这样，你可以完全按照自己的需求来控制边框的形状、样式和行为。下面我将通过一步一步的示例来说明如何实现这一点。

步骤 1: 创建一个新的ShapeBorder类

首先，我们需要创建一个新的类，这个类需要继承自ShapeBorder。在这个类中，主要实现两个方法：paint() 和 getOuterPath()。

dart
import 'package:flutter/material.dart';

class CustomRoundedRectangleBorder extends ShapeBorder {
  final double width;
  final double borderRadius;

  CustomRoundedRectangleBorder({this.width = 1.0, this.borderRadius = 12.0});

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.all(width);

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    return Path()
      ..addRRect(RRect.fromRectAndRadius(
        rect,
        Radius.circular(borderRadius),
      ));
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    final paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = width
      ..color = Colors.blue;

    canvas.drawRRect(
      RRect.fromRectAndRadius(
        rect.deflate(width / 2),
        Radius.circular(borderRadius - width / 2),
      ),
      paint,
    );
  }

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

步骤 2: 使用自定义ShapeBorder

一旦你定义了自己的ShapeBorder子类，你可以在Flutter widget中使用它。例如，使用Container widget时，你可以设置其decoration属性，将Shape设置为我们自定义的CustomRoundedRectangleBorder。

dart
Container(
  width: 200,
  height: 100,
  decoration: ShapeDecoration(
    shape: CustomRoundedRectangleBorder(
      width: 3.0,
      borderRadius: 20.0,
    ),
    color: Colors.white,
  ),
  child: Center(child: Text("自定义边框")),
)

总结

通过以上步骤，你可以创建一个具有定制圆角的矩形边框。你可以调整borderRadius和width的值来控制边框的圆角大小和线宽。这个方法的好处是它提供了极高的灵活性和可定制性，可以很容易地适用于不同的设计需求。