Flutter 中手写签名功能轻松实现

2023-12-17 13:49:26

在 Flutter 中实现签名功能，我们可以通过以下步骤轻松实现：

首先，我们需要导入必要的库：

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

接下来的步骤是创建我们自己的签名组件，让我们称之为 SignaturePad。这将是一个自定义小部件，处理签名功能。

class SignaturePad extends StatefulWidget {
  @override
  _SignaturePadState createState() => _SignaturePadState();
}

class _SignaturePadState extends State<SignaturePad> {
  final List<Offset> _points = [];

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        RenderBox referenceBox = context.findRenderObject() as RenderBox;
        Offset localPosition = referenceBox.globalToLocal(details.globalPosition);

        setState(() {
          _points.add(localPosition);
        });
      },
      onPanEnd: (DragEndDetails details) {
        setState(() {
          _points.clear();
        });
      },
      child: CustomPaint(
        painter: SignaturePainter(_points),
      ),
    );
  }
}

现在，我们需要创建 SignaturePainter 类，它将处理在屏幕上绘制签名。

class SignaturePainter extends CustomPainter {
  final List<Offset> points;

  SignaturePainter(this.points);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5.0;

    for (int i = 0; i < points.length - 1; i++) {
      canvas.drawLine(points[i], points[i + 1], paint);
    }
  }

  @override
  bool shouldRepaint(SignaturePainter oldDelegate) {
    return oldDelegate.points != points;
  }
}