Flutter 将数据转换为具有父子关系的自定义地图

Question

我正在开发一个 Flutter 应用程序，我需要从 JSON 数据生成树视图。树视图如下所示：

表格结构如下：

家长ID	儿童ID	标题
1	0	根1
2	0	根2
3	1	节点1.1
4	3	节点1.1.1
5	3	节点1.1.2
5	1	节点1.2
5	2	节点2.1
5	2	节点2.2

JSON 数据结构如下：

[
  {
    "ParentID": 1,
    "ChildID": 0,
    "Title": "Root 1"
  },
  {
    "ParentID": 2,
    "ChildID": 0,
    "Title": "Root 2"
  },
  {
    "ParentID": 3,
    "ChildID": 1,
    "Title": "Node 1.1"
  },
  {
    "ParentID": 4,
    "ChildID": 3,
    "Title": "Node 1.1.1"
  },
  {
    "ParentID": 5,
    "ChildID": 3,
    "Title": "Node 1.1.2"
  },
  {
    "ParentID": 6,
    "ChildID": 1,
    "Title": "Node 1.2"
  },
  {
    "ParentID": 7,
    "ChildID": 2,
    "Title": "Node 2.1"
  },
  {
    "ParentID": 8,
    "ChildID": 2,
    "Title": "Node 2.2"
  }
]

该数据表示一个分层结构，其中每个节点可以有多个子节点。 ParentID 字段指示父节点，ChildID 字段指示当前节点在层次结构中的位置。 目前，我已经硬编码数据来生成树视图，如下所示：

  static const List<MyNode> roots = <MyNode>[
MyNode(
  title: 'Root 1',
  children: <MyNode>[
    MyNode(
      title: 'Node 1.1',
      children: <MyNode>[
        MyNode(title: 'Node 1.1.1'),
        MyNode(title: 'Node 1.1.2'),
      ],
    ),
    MyNode(title: 'Node 1.2'),
  ],
),
MyNode(
  title: 'Root 2',
  children: <MyNode>[
    MyNode(
      title: 'Node 2.1',
    ),
    MyNode(title: 'Node 2.2')
  ],
),];

我想要实现的是从数据库检索的 JSON 数据动态生成此树视图。 有人可以帮我将这个 JSON 数据转换为 Flutter 中的分层树视图吗？任何指导或代码示例将不胜感激。 预先感谢您的帮助！

Answer 1

我已经创建了树节点小部件。发挥您所需的颜色和属性。

class TreeNodeWidget extends StatelessWidget {
  final MyNode node;

  TreeNodeWidget({required this.node});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4.0),
      child: ExpansionTile(
        enabled: false,
        initiallyExpanded: true,
        showTrailingIcon: false,
        title: Text(
          node.title,
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
        ),
        children: node.children
            .map((childNode) => TreeNodeWidget(node: childNode))
            .toList(),
        tilePadding: EdgeInsets.symmetric(horizontal: 16.0),
        childrenPadding: EdgeInsets.only(left: 32.0),
        iconColor: Colors.blue, // Customize the icon color
        collapsedIconColor: Colors.grey, // Customize the collapsed icon color
        backgroundColor: Colors.white, // Customize the background color
        expandedAlignment: Alignment.centerLeft,
        expandedCrossAxisAlignment: CrossAxisAlignment.start,
        textColor: Colors.black, // Customize the text color
        collapsedTextColor: Colors.black54, // Customize collapsed text color
      ),
    );
  }
}

你的列表视图为

ListView(
      children:
          roots.map((rootNode) => TreeNodeWidget(node: rootNode)).toList(),
    )

希望有帮助...