flutter - 包含大量输入字段的Flutter Grid-是否有聪明的方法？

Question

我对此一无所知。
我用多个输入字段构建了一个Grid，它可以工作，但是代码以一种可怕的方式重复了，我似乎找不到解决方案。

如您在图像上看到的，我已经有45个输入字段以及带有名称的字段。
由于我需要所有这些文本字段的输入，因此我对该网格中的每个项目进行了硬编码。

  var erdbeerenABController = TextEditingController();
  var erdbeeren13UhrController = TextEditingController();
  var erdbeeren15UhrController = TextEditingController();
  var erdbeeren17UhrController = TextEditingController();
  var erdbeerenEBController = TextEditingController();

  var erdbeerenGesternABController = TextEditingController();
  var erdbeerenGestern13UhrController = TextEditingController();
  var erdbeerenGestern15UhrController = TextEditingController();
  var erdbeerenGestern17UhrController = TextEditingController();
  var erdbeerenGesternEBController = TextEditingController();

  ...


          Container(
        height: 400,
        padding: EdgeInsets.only(bottom: 30),
        child: GridView.count(
          padding: const EdgeInsets.all(10),
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 6,
          children: <Widget>[
            Container(
              padding: const EdgeInsets.all(8),
              color: Colors.blue[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('AB'),
              color: Colors.blue[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('13 Uhr'),
              color: Colors.blue[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('15 Uhr'),
              color: Colors.blue[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('17 Uhr'),
              color: Colors.blue[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('EB'),
              color: Colors.blue[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Erd'),
              color: Colors.blue[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: TextField(controller: erdbeerenABController),
              color: Colors.blue[200],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: TextField(controller: erdbeeren13UhrController),
              color: Colors.blue[300],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: TextField(controller: erdbeeren15UhrController),
              color: Colors.blue[400],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: TextField(controller: erdbeeren17UhrController),
              color: Colors.blue[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: TextField(controller: erdbeerenEBController),
              color: Colors.blue[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Erd G'),
              color: Colors.blue[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: TextField(controller: erdbeerenGesternABController),
              color: Colors.blue[200],
            ),


  ...

无论如何，有没有用干净的代码方式构建这个网格？我只是不知道如何以不同的方式跟踪所有输入字段，但这感觉非常错误。

Answer 1

从Flutter官方文档尝试以下操作:
https://flutter.dev/docs/cookbook/lists/grid-lists
或有几种选择:

GridView.count(...)

GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

GridView.builder(...)

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (_, index) => FlutterLogo(),
  itemCount: 4,
)

GridView(...)

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

GridView.custom(...)

GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  childrenDelegate: SliverChildListDelegate(
    [
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
    ],
  ),
)

GridView.extent(...)

GridView.extent(
  maxCrossAxisExtent: 400,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

只是一个例子。我没有根据您的情况执行此操作，但它也应该对您有用。