flutter 画板签字

最新推荐文章于 2025-03-13 15:08:01 发布

原创

最新推荐文章于 2025-03-13 15:08:01 发布 · 562 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #ui

该代码示例展示了如何在Flutter中创建一个SignatureWidget，用户可以在此画板上绘制并保存签名。SignatureWidget包括画笔颜色、线条宽度和图片边距等可定制属性，并提供了重置、保存和上一步操作。保存功能将画板内容转换为Uint8List类型的图片数据。

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class SignatureWidget extends StatefulWidget {
  final SignatureWidgetControl? signatureControl;

  ///画笔的颜色
  final Color color;

  /// 线条的宽
  final double strokeWidth;

  /// 生成图片的边距
  final double padding;

  const SignatureWidget(
      {Key? key,
      required this.signatureControl,
      this.color = Colors.black,
      this.strokeWidth = 2,
      this.padding = 10})
      : super(key: key);

  @override
  State<SignatureWidget> createState() => _SignatureWidgetState();
}

class SignatureWidgetControl {
  Function()? _reset;
  Future<Uint8List?> Function()? _onSave;
  Function()? _previousStep;

  /// 重置画布
  void reset() {
    _reset?.call();
  }

  /// 保存画布到图片
  Future<Uint8List?> onSave() {
    return _onSave?.call() ?? Future.value(null);
  }

  ///上一步
  void previousStep() {
    _previousStep?.call();
  }
}

class _SignatureWidgetState extends State<SignatureWidget> {
  List<Path?> paths = [];
  Path? _currentPath;
  Offset? _previousPosition;
  Uint8List? image;
  Paint p = Paint();

  @override
  void initState() {
    super.initState();

    p
      ..color = widget.color
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = widget.strokeWidth
      ..isAntiAlias = true;

    widget.signatureControl?._reset = () {
      setState((