如何在颤动中居中图表视图或树视图？

Posted 2023-03-27

【中文标题】如何在颤动中居中图表视图或树视图？

【英文标题】：How to center a graph view or Tree View in flutter?

【发布时间】：2021-11-25 19:05:39

【问题描述】：

InteractiveViewer(
            constrained: false,
            boundaryMargin: const EdgeInsets.all(20),
            child: Container(
              child: GraphView(
                graph: graph,
                algorithm:
                    BuchheimWalkerAlgorithm(builder, TreeEdgeRenderer(builder)),
                paint: Paint()
                  ..color = Colors.black
                  ..strokeWidth = 1.5
                  ..style = PaintingStyle.stroke,
                builder: (Node node) 
                  var a = node.key?.value as int;

                  
                  var nodeValue =
                      _nodeData.firstWhere((element) => element.id == a);
                  //print('node Value : $nodeValue');
                  var _eid = (nodeValue.id).toString(); 
                  var _id = (nodeValue.uid).toString(); 
                  var _name = (nodeValue.name).toString(); 
                  return Center(child: rectangleWidget(_id, _name, _eid));
                ,
              ),
            ),
          ),

我想将上面的 GraphView 小部件居中。我尝试过 column、Row centering，甚至 Container 和 Center Widget...

【问题讨论】：

添加更多细节或截图。 InteractiveViewer 是您的父小部件还是在另一个小部件中。

body:InteractiveViewer ()

【参考方案1】：

我只是在转发我在 closed issue 中发现的内容，但 sjimbonator 说

如果您在 InteractiveViewer 上将 constrained 设置为 true，并使用带有 Alignment.center 的 OverflowBox 包装其子项，它将使树居中。

他们用这个例子跟进：

@override
Widget build(BuildContext context) 
  return InteractiveViewer(
    minScale: 0.35,
    maxScale: 1,
    boundaryMargin: EdgeInsets.all(double.infinity),
    child: OverflowBox(
      alignment: Alignment.center,
      minWidth: 0.0,
      minHeight: 0.0,
      maxWidth: double.infinity,
      maxHeight: double.infinity,
      child: GraphView(
        algorithm: BuchheimWalkerAlgorithm(
          builder,
          TreeEdgeRenderer(builder),
        ),
        graph: graph,
        paint: Paint()
          ..color = Theme.of(context).primaryIconTheme.color
          ..strokeWidth = 1
          ..style = PaintingStyle.stroke,
      ),
    ),
  );

【讨论】：

感谢您的回答，但是当我放大时，graphview 的居中会出现在图片中。