从列表中创建文本框 [英] creating textbox from list in flutter

问题描述

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

I have List like this (It keeps changing because this is the response of 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"}
        ]
      }
    ];

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

What I want to display is like below,

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

Based on the List, I want to display all its data, i.e

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

(我要显示多少个具有字符串类型的字符串类型，我要显示一个文本框及其显示名称，并且应该在该文本框上显示示例"1XYZ19AA"，在该列表的列表中定义的值)，
如果存在n个带有字符串类型n项的条目，则应显示带有显示名称的文本框，并且我想控制输入的数据.
如果用户输入全部或仅输入1个列表中的3个文本框，则我应该能够唯一地访问该文本框.

(How many entries have string type I want to display a text box with its display name and a value defined in the List for that map should be displayed example 1XYZ19AA on the textbox),
If there are n entries with the type string n text box with the display name should be displayed, and I want to have the control over the data entered.
If there are 3 text boxes in the list if the user enters all or only 1 I should be able to access that uniquely.

问题

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

Can you suggest any way of displaying if its a type list, because elements in a list should have a multi-select option?

谢谢

推荐答案

在此示例中，您可以显示表中的数据，还可以查看如何访问TextFields和Checkboxs的选定值

Here is an example where you can show the data from the table and also you can see how to access the selected values of the TextFields and Checkboxs

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

Note that you may need to change the type of tableValue like this:

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控制器的方式

And this is how you could handle the TextField controllers

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

这篇关于从列表中创建文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！