掌握 Flutter 中的形状和裁剪（flutter）

掌握 Flutter 中的形状和裁剪

在 Flutter 中，形状和裁剪是创建复杂 UI 设计的重要工具。以下是一个详细的指南，介绍如何掌握这些技术，包括自定义形状和裁剪器的实现。

1. 什么是形状和盒子？

• 形状：形状可以是任何由路径定义的形式。
• 盒子：盒子是一个矩形形状，由 4 个点组成，可以具有额外的属性，如边框半径。

在 Flutter 中，盒子可能出现在不同的上下文中，例如 RenderBox、BoxDecoration 和 BoxBorder。我们经常使用 BoxDecoration 来为 Container 或其他装饰盒子添加样式。

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(16),
  ),
  child: Text('Hello, World!'),
);

另外，我们还可以使用 ShapeDecoration，它提供了类似的颜色、阴影和渐变的定制，主要的区别在于它的 shape 参数接受 ShapeBorder，而不是 BoxShape。

Container(
  decoration: ShapeDecoration(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16),
    ),
    color: Colors.green,
  ),
  child: Text('Hello, Shape!'),
);

2. 自定义 ShapeBorder 实现

为了实现自定义形状，我们需要创建 ShapeBorder 或 OutlinedBorder 的一个子类，并实现以下方法：

• getInnerPath 和 getOuterPath：返回相应路径的方法。
• paint：绘制形状的方法。
• scale、copyWith

让我们使用圆锥形段来创建一个消息气泡形状，并使权重（w）参数可变。

class BubbleShapeBorder extends OutlinedBorder {
  final double w;

  BubbleShapeBorder(this.w);

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    final Path path = Path();
    path.moveTo(rect.left, rect.bottom - w);
    path.quadraticBezierTo(
      rect.left,
      rect.top,
      rect.left + w,
      rect.top
    );
    path.lineTo(rect.right - w, rect.top);
    path.quadraticBezierTo(
      rect.right,
      rect.top,
      rect.right,
      rect.bottom - w
    );
    path.lineTo(rect.right, rect.bottom);
    path.lineTo(rect.left, rect.bottom);
    path.close();
    return path;
  }

  @override
  bool get isUniform => true;

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

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

  @override
  void paint(Canvas canvas, Rect rect, Paint paint) {}

  @override
  ShapeBorder scale(double t) => BubbleShapeBorder(w * t);

  @override
  ShapeBorder copyWith(TextDirection? textDirection) => BubbleShapeBorder(w);
}

// 使用自定义形状
Container(
  decoration: ShapeDecoration(
    shape: BubbleShapeBorder(30),
    color: Colors.amber,
  ),
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text('Bubble Message'),
  ),
);

3. 裁剪器的应用

在 Flutter 中，有几个内置的裁剪器，例如：

• ClipRect：矩形裁剪
• ClipRRect：圆角矩形裁剪
• ClipOval：圆形和椭圆形裁剪
• ClipPath：自定义路径裁剪

前三个非常简单，只需将你的 widget 包装在它们之一中即可进行裁剪。

ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Container(
    color: Colors.red,
    child: Text('Clipped Rectangle'),
  ),
);

ClipPath 接受一个 CustomClipper 作为参数。在大多数情况下，只需将一个 ShapeBorder 传递给 ShapeBorderClipper。

class CustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width - 50, size.height);
    path.lineTo(50, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldDelegate) => false;
}

ClipPath(
  clipper: CustomClipper(),
  child: Container(
    color: Colors.purple,
    child: Text('Custom Clipped'),
  ),
);

4. 自定义裁剪器

在某些情况下，我们需要更多的裁剪控制，例如，当裁剪应该依赖于内容或某些兄弟 widget 时。

让我们创建一个票据形状的 widget，它的缺口将依赖于内容的大小。

class TicketClipper extends CustomClipper<Path> {
  final GlobalKey topKey;
  final GlobalKey bottomKey;

  TicketClipper(this.topKey, this.bottomKey);

  @override
  Path getClip(Size size) {
    final RenderBox? topBox = topKey.currentContext?.findRenderObject() as RenderBox?;
    final RenderBox? bottomBox = bottomKey.currentContext?.findRenderObject() as RenderBox?;

    final Rect? topRect = topBox?.paintBounds;
    final Rect? bottomRect = bottomBox?.paintBounds;

    final double topHeight = topRect?.height ?? 0;
    final double bottomHeight = bottomRect?.height ?? 0;
    final double middleHeight = size.height - topHeight - bottomHeight;

    final Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width - 20, topHeight + 20);
    path.arcTo(
      Rect.fromCircle(center: Offset(size.width - 40, topHeight + 40), radius: 20),
      startAngle: -pi / 2,
      sweepAngle: pi,
    );
    path.lineTo(size.width - middleHeight - 40, topHeight + 40 + middleHeight);
    path.arcTo(
      Rect.fromCircle(center: Offset(size.width - 40 - middleHeight, topHeight + 40 + middleHeight), radius: 20),
      startAngle: pi,
      sweepAngle: pi,
    );
    path.lineTo(20, size.height);
    path.lineTo(0, size.height);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldDelegate) =>
      oldDelegate.topKey != topKey || oldDelegate.bottomKey != bottomKey;
}

// 使用自定义裁剪器
Column(
  children: <Widget>[
    SizedBox(
      height: 100,
      key: GlobalKey(), // 顶部子项的 key
      child: Container(color: Colors.blue,),
    ),
    ClipPath(
      clipper: TicketClipper(topKey, bottomKey),
      child: Container(
        color: Colors.yellow,
        height: 200,
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 50,
              key: bottomKey, // 底部子项的 key
              child: Container(color: Colors.red,),
            ),
            Spacer(),
            SizedBox(
              height: 50,
              child: Container(color: Colors.red,),
            ),
          ],
        ),
      ),
    ),
    SizedBox(
      height: 100,
      child: Container(color: Colors.blue,),
    ),
  ],
);

以上代码展示了如何在 Flutter 中创建自定义形状和裁剪器，并通过示例展示了它们的应用。希望这些示例能帮助你更好地掌握 Flutter 中的形状和裁剪技术。