Flutter 中卡片的形状属性 - Dart

在 Flutter 中，卡片是一种常用的界面元素，用于展示内容或进行布局。卡片的形状属性可以通过 ShapeBorder 类进行定义和定制。本文将介绍 Flutter 中卡片的形状属性以及如何在 Dart 中使用它们。

1. RoundedRectangleBorder

RoundedRectangleBorder（圆角矩形边框）是 Flutter 中最常用的卡片形状之一。它可以通过设置 borderRadius 属性来指定卡片的圆角大小。例如：

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  // card content
)

在上述示例中，borderRadius 属性设置为 BorderRadius.circular(10)，表示卡片的边角为半径为 10 的圆角。

2. BeveledRectangleBorder

BeveledRectangleBorder（斜角矩形边框）是另一种常用的卡片形状，它可以创建带有斜角的矩形边框。通过设置 borderRadius 和 side 属性，可以定制斜角的样式。例如：

Card(
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(10),
    side: BorderSide(color: Colors.black),
  ),
  // card content
)

在上述示例中，borderRadius 属性设置为 BorderRadius.circular(10)，表示卡片的边角为半径为 10 的圆角。side 属性定义了斜角的边界线的样式。

3. StadiumBorder

StadiumBorder 是一种椭圆形边框的卡片形状。它可以通过设置 side 属性来定制边界线的样式。例如：

Card(
  shape: StadiumBorder(
    side: BorderSide(color: Colors.black),
  ),
  // card content
)

在上述示例中，side 属性定义了卡片的边界线的样式。

4. CircleBorder

CircleBorder（圆形边框）是一种用于创建圆形卡片的形状。它可以通过设置 side 属性来定制边界线的样式。例如：

Card(
  shape: CircleBorder(
    side: BorderSide(color: Colors.black),
  ),
  // card content
)

在上述示例中，side 属性定义了圆形卡片的边界线的样式。

5. 自定义形状属性

如果上述预定义的形状属性无法满足需求，可以通过继承 ShapeBorder 类来自定义卡片的形状属性。例如：

class CustomShapeBorder extends ShapeBorder {
  // 实现自定义形状的逻辑

  @override
  EdgeInsetsGeometry get dimensions => throw UnimplementedError();

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) =>
      throw UnimplementedError();

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) =>
      throw UnimplementedError();

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    // 绘制自定义形状的逻辑
  }

  @override
  ShapeBorder scale(double t) => throw UnimplementedError();
}

Card(
  shape: CustomShapeBorder(),
  // card content
)

在上述示例中，通过自定义 CustomShapeBorder 类来创建一个自定义的卡片形状。你需要实现 dimensions、getInnerPath、getOuterPath、paint 和 scale 方法，以定义自定义形状的逻辑。

以上就是 Flutter 中卡片的形状属性以及如何在 Dart 中使用它们的介绍。无论是通过预定义的形状属性还是自定义形状属性，都可以根据需求来创建各种不同形状的卡片。

参考链接：Flutter Card class API documentation