Flutter如何使用Tree控件

在Flutter中如何使用Tree控件？我需要在项目中展示一个层级结构的数据，类似于文件目录树或者组织架构图。尝试过一些第三方库但不太满意，官方是否有推荐的实现方式？最好能支持展开/折叠节点、自定义节点样式以及点击事件处理。另外，如果数据量较大时性能如何优化？求推荐可靠的解决方案或最佳实践。

2 回复

Flutter中可使用TreeView或ExpansionTile实现树形控件。推荐使用flutter_treeview库，通过TreeView组件和TreeNode节点构建树结构，支持展开/折叠和自定义样式。

更多关于Flutter如何使用Tree控件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以使用 TreeView 或 ExpansionTile 等组件实现树形控件。以下是两种常用方法：

1. 使用 expansion_tile_card 包（推荐）

首先在 pubspec.yaml 添加依赖：

dependencies:
  expansion_tile_card: ^2.0.0

示例代码：

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

class TreeViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          ExpansionTileCard(
            title: Text('父节点1'),
            children: [
              ListTile(title: Text('子节点1-1')),
              ListTile(title: Text('子节点1-2')),
              ExpansionTileCard(
                title: Text('子节点1-3'),
                children: [
                  ListTile(title: Text('孙节点1-3-1')),
                ],
              ),
            ],
          ),
          ExpansionTileCard(
            title: Text('父节点2'),
            children: [
              ListTile(title: Text('子节点2-1')),
            ],
          ),
        ],
      ),
    );
  }
}

2. 使用原生 ExpansionTile

ExpansionTile(
  title: Text('父节点'),
  children: [
    ListTile(title: Text('子节点1')),
    ExpansionTile(
      title: Text('子节点2'),
      children: [
        ListTile(title: Text('孙节点')),
      ],
    ),
  ],
)

3. 动态数据实现

class TreeNode {
  String title;
  List<TreeNode> children;
  TreeNode(this.title, [this.children = const []]);
}

class DynamicTreeView extends StatelessWidget {
  final List<TreeNode> data;

  Widget _buildTree(TreeNode node) {
    return ExpansionTile(
      title: Text(node.title),
      children: node.children.map(_buildTree).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: data.map(_buildTree).toList(),
    );
  }
}

主要特性：

  • 支持无限层级嵌套
  • 可自定义展开/收起动画
  • 支持自定义节点样式
  • 可通过回调处理节点点击事件

建议使用 expansion_tile_card 包，它提供了更丰富的自定义选项和更好的视觉效果。

回到顶部