Flutter树形结构生成插件generate_tree的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter树形结构生成插件generate_tree的使用

通过 generate_tree 插件,你可以在你的应用中创建带复选框的树形结构。它只需要较少的代码,你只需提供一个列表即可生成这种树。

使用

要使用此插件,在 pubspec.yaml 文件中添加 generate_tree 作为依赖项。

功能

  • 单选复选框

    • 设置 'selectOneToAll' 属性为 'false' 以一次只能选择一个。
  • 多选复选框

    • 设置 'selectOneToAll' 属性为 'true' 以选择所有子节点。
    • onChecked() 中获取所有节点详情。
  • 更改复选框颜色

  • 更改文本颜色

  • onChecked 函数提供值

    • node: 所有子节点值和当前选中节点值。
    • checked: 提供布尔值,指示复选框是否被选中。
    • commonID: 当 'selectOneToAll'true 时返回公共ID。

开始使用

安装

pubspec.yaml 文件中添加以下依赖项:

generate_tree: ^2.2.3

导入包

在 Dart 文件中导入以下库:

import 'generate_tree/generate_tree.dart';

数据列表

首先,你需要一个数据列表:

final List data = [
  {
    "checked": true,
    "children": [
      {
        "checked": true,
        "show": false,
        "children": [],
        "id": 11,
        "pid": 1,
        "commonID": 1,
        "title": "Child title 11"
      }
    ],
    "id": 1,
    "pid": 0,
    "commonID": 1,
    "show": false,
    "title": "Parent title 1"
  },
  {
    "checked": true,
    "show": false,
    "children": [],
    "id": 2,
    "commonID": 2,
    "pid": 0,
    "title": "Parent title 2"
  },
  {
    "checked": true,
    "children": [
      {
        "checked": true,
        "children": [],
        "id": 31,
        "commonID": 3,
        "pid": 3,
        "show": false,
        "title": "Parent title 3.1"
      },
      {
        "checked": true,
        "children": [
          {
            "checked": true,
            "children": [],
            "id": 321,
            "commonID": 3,
            "pid": 32,
            "show": false,
            "title": "Parent title 3.2.1"
          },
          {
            "checked": true,
            "children": [],
            "id": 322,
            "commonID": 3,
            "pid": 32,
            "show": false,
            "title": "Parent title 3.2.2"
          }
        ],
        "id": 32,
        "commonID": 3,
        "pid": 3,
        "show": false,
        "title": "Parent title 3.2"
      }
    ],
    "id": 3,
    "commonID": 3,
    "pid": 0,
    "show": false,
    "title": "Parent title 3"
  }
];

将数据转换为 TreeNode 列表

然后将数据传递给 TreeNode.fromJson() 以获取 TreeNode 列表:

final List<TreeNode> treeNodes =
    data.map((item) => TreeNode.fromJson(item)).toList();

生成树形结构

现在将这些 treeNodes 传递给 GenerateTree 以生成树:

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Generate Tree'),
    ),
    body: GenerateTree(
      data: treeNodes,
      selectOneToAll: true, // 单选或多选
      textColor: Colors.black, // 文本颜色
      onChecked: (node, checked, commonID) {
        print('isChecked : $checked');
        print('common Node ID : ${commonID}');
        print(
            'children node data : ${node.children.map((e) => '${e.title}')}');
      },
      checkBoxColor: Colors.green, // 复选框颜色
      childrenPadding: EdgeInsets.only(left: 30, top: 0, right: 0, bottom: 0), // 子节点间距
    ),
  );
}

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

1 回复

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


当然,generate_tree 是一个在 Flutter 中用于生成树形结构的插件。虽然具体的 generate_tree 插件可能不是官方 Flutter 生态系统中的常见插件(因为 Flutter 社区中的插件名称可能随着时间和版本变化),但我可以提供一个类似功能的实现思路,并使用一些常见的 Flutter 和 Dart 技术来展示如何生成一个树形结构。

以下是一个简单的 Flutter 应用示例,它展示了如何使用自定义的 TreeNode 类来创建和显示一个树形结构。为了简化,这里不使用任何特定的第三方插件,而是手动实现树形结构的生成和显示。

1. 定义 TreeNode 类

首先,定义一个 TreeNode 类来表示树的节点:

class TreeNode {
  String title;
  List<TreeNode> children;

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

2. 创建树形结构数据

然后,创建一些示例数据来表示树形结构:

List<TreeNode> createTreeData() {
  return [
    TreeNode(
      title: 'Root',
      children: [
        TreeNode(
          title: 'Child 1',
          children: [
            TreeNode(title: 'Grandchild 1.1'),
            TreeNode(title: 'Grandchild 1.2'),
          ],
        ),
        TreeNode(
          title: 'Child 2',
          children: [
            TreeNode(title: 'Grandchild 2.1'),
          ],
        ),
      ],
    ),
  ];
}

3. 创建 TreeNode Widget

接下来,创建一个 TreeNodeWidget 来递归地渲染树节点:

import 'package:flutter/material.dart';

class TreeNodeWidget extends StatelessWidget {
  final TreeNode node;

  TreeNodeWidget({required this.node});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(left: 16.0),
          child: Text(node.title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        ),
        if (node.children.isNotEmpty)
          Padding(
            padding: const EdgeInsets.only(left: 32.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: node.children.map((child) => TreeNodeWidget(node: child)).toList(),
            ),
          ),
      ],
    );
  }
}

4. 使用 TreeNodeWidget 显示树

最后,在 Flutter 应用的主页面中使用这个 TreeNodeWidget 来显示树形结构:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tree Structure Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TreePage(),
    );
  }
}

class TreePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<TreeNode> treeData = createTreeData();

    return Scaffold(
      appBar: AppBar(
        title: Text('Tree Structure Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: treeData.map((node) => TreeNodeWidget(node: node)).toList(),
          ),
        ),
      ),
    );
  }
}

完整代码

将上述代码片段整合到一个完整的 Flutter 应用中:

import 'package:flutter/material.dart';

class TreeNode {
  String title;
  List<TreeNode> children;

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

List<TreeNode> createTreeData() {
  return [
    TreeNode(
      title: 'Root',
      children: [
        TreeNode(
          title: 'Child 1',
          children: [
            TreeNode(title: 'Grandchild 1.1'),
            TreeNode(title: 'Grandchild 1.2'),
          ],
        ),
        TreeNode(
          title: 'Child 2',
          children: [
            TreeNode(title: 'Grandchild 2.1'),
          ],
        ),
      ],
    ),
  ];
}

class TreeNodeWidget extends StatelessWidget {
  final TreeNode node;

  TreeNodeWidget({required this.node});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(left: 16.0),
          child: Text(node.title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        ),
        if (node.children.isNotEmpty)
          Padding(
            padding: const EdgeInsets.only(left: 32.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: node.children.map((child) => TreeNodeWidget(node: child)).toList(),
            ),
          ),
      ],
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tree Structure Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TreePage(),
    );
  }
}

class TreePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<TreeNode> treeData = createTreeData();

    return Scaffold(
      appBar: AppBar(
        title: Text('Tree Structure Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: treeData.map((node) => TreeNodeWidget(node: node)).toList(),
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何在 Flutter 中手动创建和显示一个树形结构。如果你确实在寻找一个特定的 generate_tree 插件,建议查阅 Flutter 的 Pub.dev 网站,以找到符合你需求的插件,并参考其文档进行集成。

回到顶部