flutter - Flutter 将列表排序到 TreeNode 的嵌套小部件中

Question

我有一个由 api 返回的 json 数组，如下所示：

"data": [
        {
            "id": "7",
            "parent": "1",
        },
        {
            "id": "8",
            "parent": "7",
        },
        {
            "id": "9",
            "parent": "8",
        },
        {
            "id": "10",
            "parent": "7",
        },

    ]

有没有一种方法可以像在flutter_simple_treeview中那样将这些数据排序到树视图中，使其如下所示？我曾尝试使用 map toList 但似乎无法弄清楚算法。

1
 -7
   -8
     -9
 -10

标签： flutter

Answer 1

这有效：

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

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final data = <Map<String, dynamic>>[
    {
      "id": "7",
      "parent": "1",
    },
    {
      "id": "8",
      "parent": "7",
    },
    {
      "id": "9",
      "parent": "8",
    },
    {
      "id": "10",
      "parent": "7",
    },
  ];

  String rootNode() {
    var r = data.firstWhere((e) => !data.any((ee) => ee["id"] == e["parent"]));
    return r["parent"];
  }

  TreeNode buildNode(String e) {
    return TreeNode(
        content: Text(e),
        children: data.where((element) => element["parent"] == e).map((element) => buildNode(element["id"])).toList());
  }

  @override
  Widget build(BuildContext context) {
    return TreeView(nodes: [buildNode(rootNode())]);
  }
}