Flutter自定义树形视图开发求助：节点布局与连线实现问题

一、节点布局：用递归嵌套Column+Row实现层级结构 #

树形视图的核心是递归处理节点层级，用Column和Row完全能满足需求：

• 单个节点：用Column包裹自身内容 + 子节点行（如果有子节点）
• 子节点组：用Row横向排列所有子节点的完整子树（每个子树又是一个Column结构）
• 给节点和子树之间预留间距，避免布局拥挤

二、节点连线：用CustomPainter自定义绘制 #

graphview包不够灵活的话，直接用CustomPainter是最优解，步骤如下：

1. 给每个节点添加GlobalKey，用来获取节点在屏幕上的位置信息
2. 在CustomPainter的paint方法中，遍历树结构，获取父节点和子节点的位置坐标
3. 计算连线的起点（父节点底部中心）和终点（子节点顶部中心），用Canvas画直线或自定义样式的线条
4. 用Stack包裹组件，将CustomPainter放在底层，节点组件在上层，确保连线不会遮挡节点

三、结合InteractiveViewer适配大型树 #

直接把整个树形组件（包含Stack的节点+连线结构）放在InteractiveViewer里，开启缩放、平移功能即可，示例配置：

InteractiveViewer(
  boundaryMargin: const EdgeInsets.all(80),
  minScale: 0.5,
  maxScale: 2.0,
  child: YourTreeWidget(),
)

完整示例代码片段 #

1. 树节点数据结构 #

class TreeNode {
  final String label;
  final List<TreeNode> children;

  TreeNode({required this.label, this.children = const []});
}

2. 递归构建节点组件 #

class TreeItem extends StatefulWidget {
  final TreeNode node;
  final GlobalKey key;

  const TreeItem({required this.node, required super.key});

  @override
  State<TreeItem> createState() => _TreeItemState();
}

class _TreeItemState extends State<TreeItem> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 自定义节点样式
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey),
            borderRadius: BorderRadius.circular(4),
          ),
          child: Text(widget.node.label),
        ),
        if (widget.node.children.isNotEmpty)
          const SizedBox(height: 20),
        // 子节点横向排列
        if (widget.node.children.isNotEmpty)
          Row(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: widget.node.children.map((child) {
              final childKey = GlobalKey();
              // 保存子节点Key用于绘制连线
              (context.findAncestorWidgetOfExactType<TreeView>() as TreeView).nodeKeys[child] = childKey;
              return Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: TreeItem(node: child, key: childKey),
              );
            }).toList(),
          ),
      ],
    );
  }
}

3. 自定义连线绘制组件 #

class TreeView extends StatefulWidget {
  final TreeNode root;
  final Map<TreeNode, GlobalKey> nodeKeys = {};

  TreeView({required this.root});

  @override
  State<TreeView> createState() => _TreeViewState();
}

class _TreeViewState extends State<TreeView> {
  final GlobalKey rootKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    widget.nodeKeys[widget.root] = rootKey;
  }

  void _drawConnections(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.grey
      ..strokeWidth = 1.5;

    // 递归遍历绘制连线
    void traverse(TreeNode parent) {
      final parentRenderBox = widget.nodeKeys[parent]?.currentContext?.findRenderObject() as RenderBox?;
      if (parentRenderBox == null) return;

      final parentPos = parentRenderBox.localToGlobal(Offset.zero);
      final parentSize = parentRenderBox.size;
      final parentBottomCenter = parentPos + Offset(parentSize.width / 2, parentSize.height);

      for (final child in parent.children) {
        final childRenderBox = widget.nodeKeys[child]?.currentContext?.findRenderObject() as RenderBox?;
        if (childRenderBox == null) continue;

        final childPos = childRenderBox.localToGlobal(Offset.zero);
        final childSize = childRenderBox.size;
        final childTopCenter = childPos + Offset(childSize.width / 2, 0);

        canvas.drawLine(parentBottomCenter, childTopCenter, paint);
        traverse(child);
      }
    }

    traverse(widget.root);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CustomPaint(
          painter: _TreePainter(onPaint: _drawConnections),
          size: Size.infinite,
        ),
        TreeItem(node: widget.root, key: rootKey),
      ],
    );
  }
}

class _TreePainter extends CustomPainter {
  final void Function(Canvas canvas, Size size) onPaint;

  _TreePainter({required this.onPaint});

  @override
  void paint(Canvas canvas, Size size) {
    onPaint(canvas, size);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

4. 使用示例 #

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

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

  @override
  Widget build(BuildContext context) {
    final root = TreeNode(
      label: "Root",
      children: [
        TreeNode(
          label: "Child 1",
          children: [
            TreeNode(label: "Grandchild 1-1"),
            TreeNode(label: "Grandchild 1-2"),
          ],
        ),
        TreeNode(label: "Child 2"),
      ],
    );

    return MaterialApp(
      home: Scaffold(
        body: InteractiveViewer(
          boundaryMargin: const EdgeInsets.all(80),
          minScale: 0.5,
          maxScale: 2.0,
          child: Center(
            child: TreeView(root: root),
          ),
        ),
      ),
    );
  }
}

注意事项 #

• 确保每个TreeNode的GlobalKey关联正确，否则无法获取节点位置
• 大型树建议添加懒加载逻辑，避免一次性渲染所有节点导致性能问题
• 可修改CustomPainter的绘制逻辑，实现折线、带箭头等自定义连线样式

内容的提问来源于stack exchange，提问作者RottenSchnitzel