Flutter图形展示插件graphview的使用

Flutter GraphView 是一个用于展示数据结构图的插件，支持树形布局、有向图和分层图。它非常适合用于展示家族树、层次视图等。

插件概述

GraphView 支持不同的图布局，并且在小规模图中表现良好。你可以通过以下链接查看在线示例：

• Flutter Web 实现

布局类型

树形布局(Tree Layout)

使用 Walker 算法与 Buchheim 的运行时改进 (BuchheimWalkerAlgorithm 类)。支持不同方向的布局，包括 ORIENTATION_LEFT_RIGHT, ORIENTATION_RIGHT_LEFT, ORIENTATION_TOP_BOTTOM 和 ORIENTATION_BOTTOM_TOP (默认)。你还可以设置兄弟分离、层级分离、子树分离等参数。

有向图(Directed Graph)

使用 Fruchterman 和 Reingold 提出的算法(FruchtermanReingoldAlgorithm 类)，通过模拟吸引力/排斥力来绘制有向图。

分层图(Layered Graph)

使用 Sugiyama 等人提出的多层图绘制算法 (SugiyamaAlgorithm 类)，利用了图的层次结构。同样支持不同的方向布局。

使用方法

目前 GraphView 需要结合缩放引擎如 InteractiveViewer 使用。为了改变缩放值，可以使用 InteractiveViewer 类中的属性。

示例代码

下面是一个完整的示例 Demo，展示了如何创建并显示一个树形图。

import 'package:flutter/material.dart';
import 'package:graphview/GraphView.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: TreeViewPage(),
      );
}

class TreeViewPage extends StatefulWidget {
  @override
  _TreeViewPageState createState() => _TreeViewPageState();
}

class _TreeViewPageState extends State<TreeViewPage> {
  final Graph graph = Graph()..isTree = true;
  BuchheimWalkerConfiguration builder = BuchheimWalkerConfiguration();

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

  void setupTree() {
    final node1 = Node.Id(1);
    final node2 = Node.Id(2);
    final node3 = Node.Id(3);
    final node4 = Node.Id(4);
    final node5 = Node.Id(5);
    final node6 = Node.Id(6);
    final node7 = Node.Id(7);
    final node8 = Node.Id(8);
    final node9 = Node.Id(9);
    final node10 = Node.Id(10);
    final node11 = Node.Id(11);
    final node12 = Node.Id(12);

    graph.addEdge(node1, node2);
    graph.addEdge(node1, node3, paint: Paint()..color = Colors.red);
    graph.addEdge(node1, node4, paint: Paint()..color = Colors.blue);
    graph.addEdge(node2, node5);
    graph.addEdge(node2, node6);
    graph.addEdge(node6, node7, paint: Paint()..color = Colors.red);
    graph.addEdge(node6, node8, paint: Paint()..color = Colors.red);
    graph.addEdge(node4, node9);
    graph.addEdge(node4, node10, paint: Paint()..color = Colors.black);
    graph.addEdge(node4, node11, paint: Paint()..color = Colors.red);
    graph.addEdge(node11, node12);

    builder
      ..siblingSeparation = (100)
      ..levelSeparation = (150)
      ..subtreeSeparation = (150)
      ..orientation = (BuchheimWalkerConfiguration.ORIENTATION_TOP_BOTTOM);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
            child: InteractiveViewer(
              constrained: false,
              boundaryMargin: EdgeInsets.all(100),
              minScale: 0.01,
              maxScale: 5.6,
              child: GraphView(
                graph: graph,
                algorithm: BuchheimWalkerAlgorithm(builder, TreeEdgeRenderer(builder)),
                paint: Paint()
                  ..color = Colors.green
                  ..strokeWidth = 1
                  ..style = PaintingStyle.stroke,
                builder: (Node node) {
                  var a = node.key.value as int;
                  return rectangleWidget(a);
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget rectangleWidget(int a) {
    return InkWell(
      onTap: () {
        print('clicked');
      },
      child: Container(
        padding: EdgeInsets.all(16),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          boxShadow: [BoxShadow(color: Colors.blue[100], spreadRadius: 1)],
        ),
        child: Text('Node ${a}'),
      ),
    );
  }
}

使用 Builder 机制构建节点

你可以根据节点ID决定要显示哪个小部件。例如：

builder: (Node node) {
  var a = node.key.value as int;
  if (a == 2) {
    return rectangleWidget(a);
  } else {
    return circleWidget(a);
  }
},

设置边的颜色和厚度

你可以通过自定义 Paint 对象来设置边的颜色和厚度：

paint: Paint()..color = Colors.green..strokeWidth = 1..style = PaintingStyle.stroke,

为每条边单独设置颜色

当你添加一条边时，可以通过传递 Paint 参数来为其指定颜色：

var a = Node();
var b = Node();
graph.addEdge(a, b, paint: Paint()..color = Colors.red);

以上是关于 Flutter 图形展示插件 GraphView 的基本使用介绍及完整示例代码。希望这些信息能帮助你在项目中更好地使用 GraphView 来展示你的数据结构图。