Flutter单位树形结构管理插件unit_tree_flutter的使用

目录

• 演示
  • 1. Stack部件
  • 2. Expanded部件
• 快速开始
  • 1. 引入树形数据结构
  • 2. 使用预加载样式
  • 3. 使用懒加载样式
• 问题：我想自定义UI？
• 问题：我想更进一步自定义UI？

演示

默认情况下，您可以应用此包的8种基本变体：Stack/Expanded部件 x 多选/单选 x 预加载/懒加载。

1. Stack部件

• 1.1. <code>MStackWidget</code>：多选，预加载。
• 1.2. <code>MLazyStackWidget</code>：多选，懒加载。
• 1.3. <code>SStackWidget</code>：单选，预加载。
• 1.4. <code>SLazyStackWidget</code>：单选，懒加载。

2. Expanded部件

• 2.1. <code>MExpandedWidget</code>：多选，预加载。
• 2.2. <code>MLazyExpandedWidget</code>：多选，懒加载。
• 2.3. <code>SExpandedWidget</code>：单选，预加载。
• 2.4. <code>SLazyExpandedWidget</code>：单选，懒加载。

快速开始

1. 引入树形数据结构

树形数据结构与算法来自此包：unit_tree_data_structure。

属性isUnavailable默认定义为：如果一个分支不包含任何叶子，则该分支不可用（或不可选择）。

TreeType<EasyNodeType> sampleData() {
  Map<String, dynamic> data = {
    "data": {
      "id": 0,
      "title": "Root: Level 0",
    },
    "children": [
      {
        "data": {
          "id": 11,
          "title": "(Inner) Ex title: Level 1.1",
        },
        "children": [
          {
            "data": {
              "id": 21,
              "title": "(Inner) Ex title: Level 2.1",
            },
            "children": [
              {
                "data": {
                  "id": 31,
                  "title": "(Leaf) Ex title: Level 3.1",
                  "isInner": false,
                },
              },
              {
                "data": {
                  "id": 32,
                  "title": "(Leaf) Ex title: Level 3.2",
                  "isInner": false,
                },
              },
              {
                "data": {
                  "id": 33,
                  "title": "(Leaf) Ex title: Level 3.3",
                  "isInner": false,
                },
              },
            ],
          },
          {
            "data": {
              "id": 22,
              "title": "(Inner) Ex title: Level 2.2",
            },
            "children": [
              {
                "data": {
                  "id": 34,
                  "title": "(Leaf) Ex title: Level 3.4",
                  "isInner": false,
                },
              },
            ],
          },
          {
            "data": {
              "id": 23,
              "title": "(Inner) Ex title: Level 2.3",
            },
          },
        ],
      },
      {
        "data": {
          "id": 12,
          "title": "(Inner) Ex title: Level 1.2",
        },
      },
    ],
  };

  var tree = TreeType.fromJson<EasyNodeType>(
    json: data,
    parent: null,
    implFromJson: EasyNodeType.fromJson,
  );

  // 调用此函数非常重要
  updateAllUnavailableNodes(tree);

  return tree;
}

然后，将这些数据放入您的部件：

initData = sampleData();

return MExpandedWidget(initData); // 或
return SExpandedWidget(initData); // 或
return MStackWidget([initData]); // 或
return SStackWidget([initData]);

3. 使用懒加载样式

懒加载部件接收一个Future函数，在每次点击时获取子节点：

Future<List<TreeType<T>>> Function(TreeType<T> parent) fGetChildrenFunc;

您可以在以下源代码中阅读示例： MLazyExpandedScreen。

root = createRoot();

Future<List<TreeType<EasyNodeType>>> fGetChildrenFunc(
    TreeType<EasyNodeType> parent) async {
  List<TreeType<EasyNodeType>> newChildren;
  setState(() => isLoading = true);
  
  newChildren = implementationXYZ(parent);

  await Future.delayed(const Duration(seconds: 1));
  setState(() => isLoading = false);
  return newChildren;
}

return MLazyExpandedWidget(
  root,
  fGetChildrenFunc: fGetChildrenFunc,
); // 或

return SLazyExpandedWidget(
  root,
  fGetChildrenFunc: fGetChildrenFunc,
); // 或

return MLazyStackWidget
  [root],
  fGetChildrenFunc: fGetChildrenFunc,
); // 或

return SLazyStackWidget(
  [root],
  fGetChildrenFunc: fGetChildrenFunc,
);