Flutter交互式画布插件interactional_canvas的使用

交互式画布（Interactional Canvas）

interactional_canvas 是一个 Flutter 包，它提供了交互式画布功能，可以在 InteractiveViewer 中添加节点并操作这些节点。

使用方法（Usage）

要使用这个包，在你的 pubspec.yaml 文件中添加 interactional_canvas 作为依赖项。

dependencies:
  interactional_canvas: ^x.y.z

示例用法（Sample Usage）

你可以将 InteractionalCanvas 小部件添加到你的小部件树中。以下是一个简单的示例：

class Demo extends StatefulWidget {
  const Demo({Key? key}) : super(key: key);

  static const title = 'interactional_canvas 示例';

  [@override](/user/override)
  State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  late CanvasController controller;
  
  [@override](/user/override)
  void initState() {
    super.initState();
    controller = CanvasController();
  }
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(Demo.title),
      ),
      body: InteractionalCanvas(
        controller: controller,
      ),
    );
  }
}

完整示例代码（Complete Sample Code）

查看 example 目录下的完整示例应用。

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:interactional_canvas/interactional_canvas.dart';
import 'package:random_color/random_color.dart';
import 'package:uuid/uuid.dart';

import 'circle.dart';
import 'menus.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final CanvasController controller = CanvasController();
  final gridSize = const Size.square(50);
  late List<Node<Circle>> nodes;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 生成随机节点
    final colors = RandomColor();
    nodes = List.generate(100, (index) {
      return Node<Circle>(
        key: ValueKey(const Uuid().v1()),
        label: 'Node $index',
        offset: Offset(
          Random().nextDouble() * 5000,
          Random().nextDouble() * 5000,
        ),
        size: Size.square(Random().nextDouble() * 200 + 100),
        child: Circle(color: colors.randomColor()),
      );
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      themeMode: ThemeMode.system,
      theme: ThemeData.light(useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('交互式画布示例'),
          centerTitle: false,
        ),
        body: Column(
          children: [
            Menus(controller: controller),
            Expanded(
              child: Stack(
                children: [
                  InteractionalCanvas(
                    drawVisibleOnly: true,
                    controller: controller,
                    gridSize: gridSize,
                    nodes: nodes,
                    onSelect: (selection) {
                      for (final node in selection) {
                        node.update(child: node.child.update(color: Colors.blue));
                      }
                    },
                    onDeselect: (selection) {
                      for (final node in selection) {
                        node.update(child: node.child.update(color: RandomColor().randomColor()));
                      }
                    },
                  ),
                  const Positioned(
                    right: 10,
                    top: 10,
                    width: 300,
                    height: 300,
                    child: IgnorePointer(
                      child: Text(
                        "提示:\n"
                        "1. 按住空格键并拖动以移动视口。\n"
                        "2. 按住 Shift 键并调整节点大小以保持比例。\n"
                        "3. 按住 Shift 键以选择多个节点。\n"
                        "4. 使用箭头键移动选中的节点。\n"
                        "5. 按住 Shift 键并按箭头键以快速移动选中的节点。",
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}