flutter - 如何在Flutter中创建可滚动的网格?

标签 flutter dart layout grid

@编辑
将标题更改为误导性,对此表示抱歉。也缺乏研究,将尝试不要犯同样的错误。我将保留原始问题,但是M123遮阳篷就足够了,谢谢。
@原版的
因此,对于Flutter来说,我是新手,我参加了一些udemy类(class),但我的知识不足以应对这一挑战...
我需要创建一个不可滚动的网格,该网格必须能够容纳不同类型的Widget,具有不同的大小,有时放置在屏幕的不同区域中,就像布局生成器一样。我还必须能够保存布局。
我想根据屏幕尺寸创建一个矩阵,以将小部件的位置保持在这样的位置:
W =小部件,X =另一个小部件已占用的位置
enter image description here
我的问题之一是如何打印矩阵内容,我应该在列内创建一行,在行内创建列,在flutter中使用网格 View (如何操作)?
现在,我陷入了这个小代码:

 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,但是几乎所有内容都是可滚动的,并且都基于列表,因此这些小部件是按顺序放置的,而不是放在特定的位置,也许我错过了一些东西。

最佳答案

您不必使用列和行,有一个Widget。

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


ANYWIDGET(){
 return...
}

关于flutter - 如何在Flutter中创建可滚动的网格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64035237/

相关文章:

dart - Dart 中的 for-in 循环顺序

dart - 如何在stageXL中创建线,圆?

Flutter:在一个简单的示例中,输入文本字段无法正常工作.....我哪里错了?

android - 无法获取 flutter 应用程序的 SHA-1 key

flutter - 如何在我 flutter 的电子商务应用程序中添加货币转换器?

python - 用新的布局替换 QScrollArea 的布局

android - 如何更改android Activity 中的标题栏颜色?

c# - Xamarin.Form 的 LayoutOptions,尤其是 Fill 和 Expand 之间有什么区别?

encryption - 如何在flutter中加密用户名和密码

flutter - android_intent Flutter插件,我想从另一个应用程序启动一个应用程序,并使用android_intent库传递一些参数