如何在 flutter 中将图形视图或树视图居中？

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 小部件居中。我试过列居中、行居中，甚至容器和中心小部件...

Answer 1

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

if you set constrained to true on your InteractiveViewer and wrap its child with an OverflowBox with Alignment.center it will center the tree.

他们用这个例子跟进：

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