如何使用交互式查看器在大于视区的表或列之间平移

Question

开发一个涉及比视口大的大网格的游戏。网格中的所有单元格都具有相同的高度/宽度(正方形(。

由于它是一个网格，我不能使用SingleChildScrollView在两个方向上平移。我可以使用其中两个来实现x和y滚动，但不能同时使用。

根据我所看到的，新的InteractiveViewer似乎可以处理这个问题。但是，它似乎不会在视口之外平移。

下面是一些最小的示例代码。这是使用Table/TableRow/TableCell，但我在Column/Row/Contain中看到了同样的问题。

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MyWidget()

),
);
}
}
List<TableRow> getChildren() {

List<TableRow> children = List<TableRow>();

for( var x = 0; x < 20; x++ ) {
List<TableCell> colChildren = List<TableCell>();

for( var y = 0; y < 20; y++ )
{
colChildren.add(
TableCell( child: Container(
width: 100,
height: 100,
child: Center( child: Text(x.toString()+","+y.toString()))
))
);
}
children.add(
TableRow( children: colChildren)
);

}
return children;
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return InteractiveViewer(
child: Table (
children: getChildren()
)
);
}
}

Answer 1

我偶然发现了这个页面，它帮助我解决了这个问题：https://master-api.flutter.dev/flutter/widgets/InteractiveViewer/constrained.html

基本上，如果子对象大于视口，则需要将constraint:false属性添加到InteractiveViewer中，然后它就可以工作了！

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return InteractiveViewer(
constrained: false,
child: Table (
children: getChildren()
)
);
}
}