Question

开发一个游戏，其中包含一个较大的网格，该网格将大于视口。网格中的所有单元格都具有相同的高度/宽度（正方形）。

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

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

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

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

基本上，如果子项大于视口，则需要将constrained：false属性添加到InteractiveViewer，然后它将起作用！

"editor.formatOnSave": true,

如何使用InteractiveViewer平移大于视口的表或列

1 个答案: