Question

我有这样的列表（它不断变化，因为这是API的响应，

tableValue=[
      {
        "id": "RegNo",
        "displayName": "Enter Register No",
        "type": "string",
        "value": "1XYZ19AA"
      },
      {
        "id": "name",
        "displayName": "Enter Name",
        "type": "string",
        "value": "KARAN"
      },
      {
        "id": "sub",
        "displayName": "choose subjects",
        "type": "list",
        "value": ["JAVA"],
        "data": [
          {"id": "1", "dispId": "JAVA"},
          {"id": "2", "dispId": "Python"},
          {"id": "3", "dispId": "Dart"}
        ]
      }
    ];

我要显示的内容如下所示，

基于列表，我要显示其所有数据，即

Enter Register No --Text_Box here--
Enter Name        --Text_Box here--

（我要显示多少个具有字符串类型的字符串类型的文本，以显示其显示名称，并在该列表的列表中显示该值，例如在该文本框中显示示例1XYZ19AA），
如果存在n个类型为字符串的条目，则应显示具有显示名称的n文本框，我想控制输入的数据。
如果用户输入全部或仅输入1个列表中的3个文本框，则我应该能够唯一地访问它。

问题

由于类型列表中的元素应具有多选选项，您是否可以建议以任何方式显示其类型列表？

谢谢

Answer 1

ListView.builder(
  itemCount: tableValue.length,
  itemBuilder:(context, index){
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height/10,
      child: Row(
        children: <Widget>[
          Container(
             width: MediaQuery.of(context).size.width/2,
             height: MediaQuery.of(context).size.height/10,
             alignment: AlignmentDirectional.centerStart,
             child:Text(tableValue[index]['displayName'])
           ),
          Container(
             width: MediaQuery.of(context).size.width/2,
             height: MediaQuery.of(context).size.height/10,
             alignment: AlignmentDirectional.centerStart,
             child: TextField(
                decoration: InputDecoration.collapsed(
                  hintText: "blah"
                )
             )
           )
        ],
      )
    );
  }
)

Answer 2

这里是一个示例，您可以在其中显示表中的数据，还可以看到如何访问TextFields和Checkboxs的选定值

请注意，您可能需要像这样更改tableValue的类型：

List<Map<String, dynamic>> tableValue = [...]
Map<String, TextEditingController> controllers = {};
Set<String> checks = {};

这将是屏幕的主体

ListView(
  children: <Widget>[
    Column(
      children: tableValue
          .where((entry) => entry["type"] == "string")
          .map((entry) => Row(
                children: <Widget>[
                  Text(entry["displayName"]),
                  Flexible(
                    child: TextField(
                      controller: getController(entry["id"]),
                    ),
                  )
                ],
              )).toList(),
    ),
    Column(
      children: tableValue
          .firstWhere(
              (entry) => entry["type"] == "list")["data"]
          .map<Widget>(
            (data) => CheckboxListTile(
              title: Text(data["dispId"]),
              value: checks.contains(data["id"]),
              onChanged: (checked) {
                setState(() {
                  checked ? checks.add(data["id"]) : checks.remove(data["id"]);
                });
              },
            ),
          ).toList(),
    ),
    Text("Texts: ${controllers.values.map((controller) => controller.text)}"),
    Text("Checks: ${checks.map((check) => check)}"),
  ],
)

这就是您处理TextField控制器的方式

TextEditingController getController(String id) {
  controllers.putIfAbsent(id, () => TextEditingController());
  return controllers[id];
}

从列表中创建文本框

2 个答案: