如何在 Flutter 中创建可滚动的网格？

Question

@编辑改了标题误导了，不好意思。研究也有欠缺，会尽量不犯同样的错误。我会保留原来的问题，但是M123 awnser已经足够了，谢谢。

@原创所以，我是 Flutter 的新手，我做了一些 udemy 类，但我的知识不足以应对这个挑战...... 我需要创建一个不可滚动的网格，这个网格必须能够容纳不同类型的小部件，具有不同的大小，有时放置在屏幕的不同区域，就像布局构建器一样。我还必须能够保存布局。

我想创建一个基于屏幕大小的矩阵来保持小部件的位置，如下所示：

W = 小部件，X = 其他小部件已占用的位置

我的一个问题是如何打印矩阵内容，我应该在列中创建行，在行中创建列，在 flutter 中使用网格视图（如何？）？

现在我被这个小代码困住了：

 static const String id = 'grade';
 @override
 _GradeState createState() => _GradeState();
}

class _GradeState extends State<Grade> {
 List<List<Widget>> grade = [];

 Widget _corpoDaGrade() {
   int gridStateLength = grade.length;
   double width = MediaQuery.of(context).size.width;
   double height = MediaQuery.of(context).size.height;
   double y = width / 50;
   double x = height / 50;

   print('x = $x');
   print('y = $y');
   print('width = $width');
   print('height = $height');

   for (int i = 0; i < x.toInt(); i++) {
     List<Widget> list = [];
     for (int j = 0; j < y.toInt(); j++) {
       //print(j);
       list.add(
         Container(
           height: 50,
           width: 50,
           decoration: BoxDecoration(
             border: Border.all(
               color: Colors.black,
             ),
           ),
         ),
       );
     }
     grade.add(list);
   }

   return Column(
     children: [
       Expanded(
         child: Container(),
       ),
     ],
   );
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: SafeArea(
       child: _corpoDaGrade(),
     ),
   );
 }
}

我只是想用简单的小部件打印矩阵。

我确实寻找了一些包，比如这个 https://github.com/letsar/flutter_staggered_grid_view，但几乎所有东西都是可滚动的并且基于列表，因此小部件按顺序放置，而不是在特定位置，也许我错过了一些东西。

Answer 1

您不必使用列和行，有一个小部件可以做到这一点。

Table(
  children:[
    TableRow(
     children[
       ANYWDIDGET();
       ANYWDIDGET();
       ANYWDIDGET();
     ]),
    TableRow(
      children[
       ANYWDIDGET();
       ANYWDIDGET();
       ANYWDIDGET();
      ]),
  ]
); 


ANYWIDGET(){
 return...
}

Answer 2

好吧，我花了一些时间才回到这里告诉你们我用什么方法解决了我的问题，M123 绝对是一个了不起的答案，应该对你有帮助，但为了更容易，我在 pub.dev 由 Fastriver 制作 (https://github.com/organic-nailer) that creates a simple unscrollable grid view: https://pub.dev/packages/expanded_grid 。如果你使用它，请给 him/her 一些爱。

如何在 Flutter 中创建可滚动的网格？

How to create an unscrollable grid in Flutter?

grid

layout

dart

flutter