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

Question

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...

Answer 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,
      ),
    ),
  );
}