flutter 如何建立一个动态的有很多关系的家谱?

6rvt4ljy  于 2023-03-13  发布在  Flutter
关注(0)|答案(4)|浏览(216)

我应该建立一个家庭树与Flutter我需要添加一个关系到文本4和文本3通过点击它并添加drawLine观看项目添加

示例:

aij0ehis

aij0ehis1#

您可以使用Graphview创建带有静态数据的家谱。

kmpatx3s

kmpatx3s2#

使用这个软件包graphite
和你照片差不多

mu0hgdu0

mu0hgdu03#

对于家谱,您可以使用名为BALKAN OrgChartJS的JavaScript组件
它几乎支持您所需的一切

6tqwzwtp

6tqwzwtp4#

类TreeViewPage扩展了状态控件{
@override树视图页面状态创建状态()=〉树视图页面状态();}
类树视图页面状态扩展状态{
双标度= 1.0;获取名称=〉null;
@override小部件构建(BuildContext上下文){ return框架(appBar:应用程序栏(),正文:色谱柱(主轴尺寸:主轴尺寸最大值,子级:[行(主轴对齐:MainAxisAlignment.center,儿童:[图标按钮(按下时:(){设置状态((){ _刻度 *= 1.5;}); },图标:图标(图标添加)、)、图标按钮(按下时:(){设置状态((){ _刻度/= 1.5;}); },图标:图标(图标移除)、)、]、)、展开(子项:交互式查看器(比例启用:false,变换控制器:转换控制器()..值=矩阵4.对角3值(_比例,_比例,1),约束:false,边界边距:边缘插入,全部(100),最小比例:0.01,最大刻度:5.6,儿童:图形视图(图形:图形,算法:BuchheimWalkerAlgorithm(构建器,树边渲染器(构建器)),绘制:绘制()..颜色=Colors.green..笔划宽度= 1..样式=绘画样式.笔划,生成器:(节点node){ //为每个节点ID创建一个新的节点对象final nodeKey = node.key!.value as int?;最终节点对象=节点ID(节点密钥!);

return rectangleWidget(nodeObject);
                },

              )),
        ),
      ],
    ));

}
随机r =随机();
控件矩形控件(节点节点){ return墨水池(onTap:(){ //创建具有唯一ID的新节点final newNode = Node.Id(graph.nodeCount()+ 1);

// Add the new node as a child to the clicked node
    graph.addEdge(node, newNode);

    // Update the graph
    setState(() {});
  },
  child: Container(
    padding: EdgeInsets.all(16),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(4),
      boxShadow: [
        BoxShadow(color: Colors.blue[100]!, spreadRadius: 1),
      ],
    ),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Node ${node.key!.value}'),
        SizedBox(height: 8),
        ElevatedButton(
          onPressed: () {
            // Create a new node with a unique ID
            final newNode = Node.Id(graph.nodeCount() + 1);

            // Add the new node as a child to the clicked node
            graph.addEdge(node, newNode);

            // Update the graph
            setState(() {});
          },
          child: Text('Add child'),
        ),
      ],
    ),
  ),
);

}
最终图形graph = Graph().. isTree =真;布赫海姆步行机配置生成器=布赫海姆步行机配置();
@覆盖空的初始状态(){

final node1 = Node.Id(1);





graph.addNode(node1);



builder
  ..siblingSeparation = (100)
  ..levelSeparation = (100)
  ..subtreeSeparation = (10)
  ..orientation = (BuchheimWalkerConfiguration.ORIENTATION_TOP_BOTTOM);

} }

相关问题