создание текстового поля из списка во флаттере - PullRequest
Новая
       9

создание текстового поля из списка во флаттере

1 голос
/ 10 октября 2019

У меня есть список вроде этого (он постоянно меняется, потому что это ответ 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 с отображаемым именем, и я хочу иметь контроль над вводимыми данными.
Если в текстовом поле 3список, если пользователь вводит все или только 1, я должен иметь доступ к этому уникально.

Вопрос

Можете ли вы предложить какой-либо способ отображения, если егосписок типов, потому что элементы в списке должны иметь опцию множественного выбора?

Спасибо

Ответы [ 2 ]

0 голосов
/ 10 октября 2019

Вот пример, в котором вы можете отобразить данные из таблицы, а также узнать, как получить доступ к выбранным значениям 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];
}
0 голосов
/ 10 октября 2019 
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"
                )
             )
           )
        ],
      )
    );
  }
)
...