Flutter 图片添加标签，随意拖动位置

前端

2024-01-18 04:33:58

如何使用 Flutter 的 Draggable 和自定义 RenderObject 实现图片添加标签，并随意拖动位置

简介

本文旨在展示如何使用 Flutter 的 Draggable 和自定义 RenderObject 实现图片添加标签，并允许用户随意拖动标签位置。本文将介绍实现思路、涉及的技术点，并提供具体的示例代码和效果展示。

实现效果

下图展示了使用本方案实现的效果：

[图片]

实现思路与技术点

该功能的实现主要涉及以下技术点：

Draggable：Flutter 提供的用于实现拖放功能的组件。
RenderObject：Flutter 的基础渲染对象，用于自定义控件的渲染和行为。
CustomPaint：Flutter 提供的用于绘制自定义图形和效果的组件。

具体实现思路如下：

创建一个自定义 RenderObject，用于渲染标签。
在 RenderObject 中处理拖放事件，并更新标签位置。
使用 CustomPaint 绘制标签的圆形外观。
将自定义 RenderObject 集成到 Flutter 小部件中。

示例代码

import 'package:flutter/material.dart';

class DraggableLabel extends RenderObjectWidget {
  final Offset position;
  final void Function(Offset) onDragUpdate;
  final void Function() onDragEnd;

  const DraggableLabel({
    required this.position,
    required this.onDragUpdate,
    required this.onDragEnd,
  });

  @override
  RenderObject createRenderObject(BuildContext context) {
    return _DraggableLabelRenderObject(
      position: position,
      onDragUpdate: onDragUpdate,
      onDragEnd: onDragEnd,
    );
  }

  @override
  void updateRenderObject(BuildContext context, _DraggableLabelRenderObject renderObject) {
    renderObject
      ..position = position
      ..onDragUpdate = onDragUpdate
      ..onDragEnd = onDragEnd;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final canvas = context.canvas;
    canvas.drawCircle(offset, 10.0, Paint()..color = Colors.blue);
  }
}

class _DraggableLabelRenderObject extends RenderObject {
  Offset position;
  void Function(Offset) onDragUpdate;
  void Function() onDragEnd;

  _DraggableLabelRenderObject({
    required this.position,
    required this.onDragUpdate,
    required this.onDragEnd,
  });

  @override
  void paint(PaintingContext context, Offset offset) {
    context.canvas.drawCircle(position, 10.0, Paint()..color = Colors.blue);
  }

  @override
  void handleEvent(PointerEvent event, BoxHitTestEntry entry) {
    switch (event.type) {
      case PointerEventType.down:
        onDragUpdate(event.position);
        break;
      case PointerEventType.move:
        onDragUpdate(event.position);
        break;
      case PointerEventType.up:
        onDragEnd();
        break;
    }
  }
}

集成到 Flutter 小部件

import 'package:flutter/material.dart';

class ImageWithDraggableLabels extends StatefulWidget {
  final ImageProvider image;

  const ImageWithDraggableLabels({required this.image});

  @override
  _ImageWithDraggableLabelsState createState() => _ImageWithDraggableLabelsState();
}

class _ImageWithDraggableLabelsState extends State<ImageWithDraggableLabels> {
  final List<Offset> labelPositions = [];

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image(image: widget.image),
        for (var i = 0; i < labelPositions.length; i++)
          DraggableLabel(
            position: labelPositions[i],
            onDragUpdate: (offset) => setState(() => labelPositions[i] = offset),
            onDragEnd: () => print('Drag ended for label ${i + 1}'),
          ),
      ],
    );
  }
}