Progression TreeMap

Progression TreeMap 是一个开源的 Flutter 包，用于在 UI 中显示树状列表。您可以使用它将任何复杂的树状图或进展图可视化到您的应用程序 UI 中，并根据您的喜好进行自定义。

示例用法

添加依赖

安装并导入该包。然后只需自定义其参数。

dependencies:
  flutter:
    sdk: flutter
  progression_tree_map: ^0.5.0

如何使用

创建节点列表及其子列表，如下所示

  Map<TreeNode?, List<TreeNode>> nodes =
{TreeNode():[
  TreeNode(nodes: [
    TreeNode(),
    TreeNode(nodes: [
      TreeNode(nodes: [
        TreeNode(nodes: [
          TreeNode(), TreeNode()])
      ])])])]
};

Colored Nodes & Outlines

屏幕截图和实现

示例 1 - 带颜色的节点和轮廓

Colored Nodes & Outlines

ProgressionTreeMap(
treeNodes: nodes,
circleBoundaryColor: Colors.grey.shade300,
circleBoundaryShade: false,
nodeSeparationAngleFac: 1.3,
globalNodeSize: 20,
centerNodeSize: 40,
circleBoundaryStrokeWidth: 1.5,
linesStrokeWidth: 2,
linesStrokeColor: Colors.blueAccent,
nodeDecoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.blueAccent))

示例 2 - 带颜色的节点和图标

Colored Nodes & Outlines

ProgressionTreeMap(
treeNodes: nodes,
circleBoundaryPaintingStyle: PaintingStyle.fill,
circleBoundaryColor: Colors.deepPurpleAccent,
nodePlacement: NodesPlacement.border,
nodeSeparationAngleFac: 3,
globalNodeSize: 30,
centerNodeSize: 60,
linesStartFromOrigin: true,
linesStrokeWidth: 2,
linesStrokeColor: Colors.cyanAccent,
nodeDecoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.cyanAccent))

示例 3 - 发光节点和背景文本

Glowing Nodes & Background Text

ProgressionTreeMap(
treeNodes: nodes,
circleBoundaryPaintingStyle: PaintingStyle.fill,
circleBoundaryColor: Colors.red,
nodePlacement: NodesPlacement.centerOut,
nodeSeparationAngleFac: 1.2,
globalNodeSize: 20,
centerNodeSize: 40,
linesStrokeWidth: 3,
nodeDecoration: const BoxDecoration(
shape: BoxShape.circle, gradient:
RadialGradient(
colors: [Colors.white, Colors.white30])))

示例 4 - 集合和 UI 元素

Collection & Ui Items

ProgressionTreeMap(
treeNodes: nodes,
circleBoundaryPaintingStyle: PaintingStyle.fill,
circleBoundaryColor: Colors.deepOrangeAccent,
nodePlacement: NodesPlacement.centerIn,
nodeSeparationAngleFac: 1.3,
centerNodeSize: 60,
linesStartFromOrigin: false,
linesStrokeWidth: 3,
linesStrokeColor: Colors.white10)),

更多信息

TreeNode 可以有多个属性，您可以分别自定义，如下所示

TreeNode(
child: Icon(
Icons.restaurant_menu,
color: Colors.black,
size: 32,
),
decoration:
BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
size: 30)

必须作为 Map<TreeNode?, List<TreeNode>> 的映射添加到 ProgressionTreeMap 中

Map<TreeNode?, List<TreeNode>>  nodes =
{
  const TreeNode(): [
    const TreeNode(nodes: [
      TreeNode(
        child: Icon(Icons.lunch_dining_rounded),
      ),
      TreeNode(
        child: Icon(Icons.ramen_dining),
      )
    ])]
}

按以下方式添加到树中

ProgressionTreeMap(
treeNodes: nodes
),

高度可定制，请随意根据您的喜好进行定制！ ?

GitHub

查看 Github