Flutter节点编辑器插件node_editor的使用

Flutter节点编辑器插件node_editor的使用

介绍

node_editor 是一个高度可定制的Flutter节点编辑器，允许开发者通过Flutter小部件自定义节点和端口，提供无与伦比的UI灵活性。它支持交互式节点元素、可定制的连接和背景、动态端口逻辑、扩展设计以及跨平台兼容性。

特点

• Flutter小部件用于节点和端口：使用任何Flutter小部件自定义节点和端口，提供极大的UI灵活性。
• 交互式节点元素：直接在节点中嵌入交互式小部件（如文本框和复选框），实现动态用户输入。
• 可定制的连接和背景：通过广泛的样式选项自定义连接和背景，确保视觉一致性。
• 动态端口逻辑：高级端口连接逻辑，包括可定制的验证和无限连接容量。
• 扩展设计：轻松添加新的节点和端口类型，确保可扩展性。
• 跨平台兼容性：利用Flutter的跨平台能力，一次构建，随处部署。

开始使用

要使用 node_editor 插件，只需在 pubspec.yaml 文件中添加依赖项：

dependencies:
  node_editor: ^0.0.5

或者使用命令行：

flutter pub add node_editor

使用示例

1. 初始化NodeEditor

首先，需要创建一个 FocusNode 和 NodeEditorController，然后将其传递给 NodeEditor 小部件：

import 'package:flutter/material.dart';
import 'package:node_editor/node_editor.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NodeEditorExample(),
    );
  }
}

class NodeEditorExample extends StatefulWidget {
  [@override](/user/override)
  _NodeEditorExampleState createState() => _NodeEditorExampleState();
}

class _NodeEditorExampleState extends State<NodeEditorExample> {
  final NodeEditorController _controller = NodeEditorController();
  final FocusNode _focusNode = FocusNode();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Node Editor Example')),
      body: Column(
        children: [
          Expanded(
            child: NodeEditor(
              focusNode: _focusNode,
              controller: _controller,
              background: const GridBackground(), // 可选的网格背景
            ),
          ),
          ElevatedButton(
            onPressed: () {
              // 添加一个节点
              _addNode();
            },
            child: Text('Add Node'),
          ),
        ],
      ),
    );
  }

  void _addNode() {
    final newNode = exampleNode('Node 1');
    _controller.addNode(newNode, NodePosition.afterLast);
  }

  NodeWidgetBase exampleNode(String name) {
    return ContainerNodeWidget(
      name: name,
      typeName: 'node_3',
      backgroundColor: Colors.blue.shade800,
      radius: 10,
      width: 200,
      contentPadding: const EdgeInsets.all(4),
      selectedBorder: Border.all(color: Colors.white),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              InPortWidget(
                name: 'PortIn1',
                onConnect: (String name, String port) => true,
                icon: Icon(
                  Icons.circle_outlined,
                  color: Colors.yellowAccent,
                  size: 20,
                ),
                iconConnected: Icon(
                  Icons.circle,
                  color: Colors.yellowAccent,
                  size: 20,
                ),
                multiConnections: false,
                connectionTheme: ConnectionTheme(
                  color: Colors.yellowAccent,
                  strokeWidth: 2,
                ),
              ),
            ],
          ),
          Icon(Icons.safety_divider),
          OutPortWidget(
            name: 'PortOut1',
            icon: Icon(
              Icons.pause_circle_outline,
              color: Colors.deepOrange,
              size: 24,
            ),
            iconConnected: Icon(
              Icons.pause_circle,
              color: Colors.deepOrange,
              size: 24,
            ),
            multiConnections: false,
            connectionTheme: ConnectionTheme(
              color: Colors.deepOrange,
              strokeWidth: 2,
            ),
          ),
        ],
      ),
    );
  }
}