Flutter树形视图插件flexible_tree_view的使用

特性

展开/折叠树节点；
显示父节点到子节点之间的连线；
高度灵活，可自定义节点小部件。

开始使用

在pubspec.yaml文件中添加依赖：

dependencies:
    flexible_tree_view: ^0.0.5

截图

使用方法

以下是一个简单的示例，展示如何使用flexible_tree_view插件来创建一个树形视图。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tree View Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: FlexibleTreeView<String>(
            nodes: [
              TreeNode<String>(
                data: 'Cities',
                expanded: true,
                children: [
                  TreeNode<String>(data: 'Beijing'),
                  TreeNode<String>(data: 'Shanghai'),
                  TreeNode<String>(data: 'Tokyo'),
                  TreeNode<String>(data: 'Paris')
                ]
              )
            ],
            nodeItemBuilder: (context, node) {
              return Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: Row(
                  children: [
                    node.hasNodes
                        ? IconButton(
                            iconSize: 12,
                            splashRadius: 16,
                            padding: EdgeInsets.zero,
                            constraints: BoxConstraints.tight(Size(30, 30)),
                            icon: Icon(node.expanded ? Icons.remove : Icons.add),
                            onPressed: () {
                              node.expanded = !node.expanded;
                            },
                          )
                        : const SizedBox(width: 12),
                    Text(
                      node.data,
                      style: TextStyle(fontSize: 12, color: Colors.black),
                      overflow: TextOverflow.ellipsis,
                    )
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

更多关于Flutter树形视图插件flexible_tree_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼•1 个月前

更多关于Flutter树形视图插件flexible_tree_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flexible_tree_view 是一个用于在 Flutter 应用中展示树形结构的插件。它允许你创建可扩展和可折叠的树形视图，适用于展示层级数据，如文件目录、组织结构图等。

安装

首先，你需要在 pubspec.yaml 文件中添加 flexible_tree_view 依赖：

dependencies:
  flutter:
    sdk: flutter
  flexible_tree_view: ^1.0.0

然后运行 flutter pub get 来安装依赖。

基本用法

1. 创建树节点

flexible_tree_view 使用 TreeNode 类来表示树中的每个节点。你可以通过 TreeNode 来构建树形结构。

import 'package:flexible_tree_view/flexible_tree_view.dart';

void main() {
  TreeNode<String> root = TreeNode<String>('Root');
  TreeNode<String> child1 = TreeNode<String>('Child 1');
  TreeNode<String> child2 = TreeNode<String>('Child 2');
  TreeNode<String> child1_1 = TreeNode<String>('Child 1.1');
  TreeNode<String> child1_2 = TreeNode<String>('Child 1.2');

  root.addChildren([child1, child2]);
  child1.addChildren([child1_1, child1_2]);
}

2. 在 UI 中展示树形视图

你可以使用 TreeView 控件来展示树形结构。TreeView 需要一个 TreeNode 作为根节点，并且可以使用 TreeViewController 来控制树的展开和折叠状态。

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

class TreeViewExample extends StatelessWidget {
  final TreeViewController controller = TreeViewController();

  @override
  Widget build(BuildContext context) {
    TreeNode<String> root = TreeNode<String>('Root');
    TreeNode<String> child1 = TreeNode<String>('Child 1');
    TreeNode<String> child2 = TreeNode<String>('Child 2');
    TreeNode<String> child1_1 = TreeNode<String>('Child 1.1');
    TreeNode<String> child1_2 = TreeNode<String>('Child 1.2');

    root.addChildren([child1, child2]);
    child1.addChildren([child1_1, child1_2]);

    return Scaffold(
      appBar: AppBar(
        title: Text('TreeView Example'),
      ),
      body: TreeView(
        controller: controller,
        nodeBuilder: (BuildContext context, TreeNode<String> node) {
          return ListTile(
            title: Text(node.data),
            onTap: () {
              controller.toggleExpansion(node);
            },
          );
        },
        root: root,
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: TreeViewExample(),
));

3. 控制树的展开和折叠

你可以使用 TreeViewController 来控制树的展开和折叠状态。TreeViewController 提供了 expandNode, collapseNode, toggleExpansion 等方法来控制节点的展开和折叠。

controller.expandNode(child1); // 展开 child1 节点
controller.collapseNode(child1); // 折叠 child1 节点
controller.toggleExpansion(child1); // 切换 child1 节点的展开状态

自定义节点样式

你可以通过 nodeBuilder 参数来自定义每个节点的显示样式。nodeBuilder 接收一个 BuildContext 和一个 TreeNode，并返回一个 Widget。

TreeView(
  controller: controller,
  nodeBuilder: (BuildContext context, TreeNode<String> node) {
    return Card(
      child: ListTile(
        title: Text(node.data),
        trailing: Icon(Icons.arrow_right),
        onTap: () {
          controller.toggleExpansion(node);
        },
      ),
    );
  },
  root: root,
)