获取列表视图值抖动

Question

我需要基于这个api构建一个屏幕。 input_type是我要使用的Widget 。

{
   "checklist_section_items":[
      {
         "id":"24",
         "checklist_section_id":13,
         "item":"Mix Concrete Grade",
         "input_type":"Text",
         "input_value":null
      },
      {
         "id":"25",
         "checklist_section_id":13,
         "item":"Spun / RC,
         "input_type":"Radio Button",
         "input_value":"S, R"
      },
   ]
}

这是我尝试过的

FutureBuilder<List<ChecklistSessionsItemData>>(
   future:controller.fetchChecklistSessionItem(checkListSectionId),
     builder: (context, itemSnapshot) {
         switch (itemSnapshot.connectionState) {
           case ConnectionState.waiting:
           return CircularProgressIndicator();

           case ConnectionState.done:
           if (itemSnapshot.hasData) {
             return ListView.builder(
                physics:itemCount:itemSnapshot.data?.length,
                itemBuilder:(context, itemIndex) {
                ChecklistSessionsItemData _data = itemSnapshot.data![itemIndex]; 
                    return Column(
                       crossAxisAlignment:CrossAxisAlignment.start,
                         children: [
                           Padding(child:Card(child: checkInputType( _data)
                            ]
                                .....
                          }),
                      ...

这里是checkInputType方法。

 Widget checkInputType(ChecklistSessionsItemData data) {
    var datas;
    if (data.inputType == "Radio Button") {
      datas = data.inputValue?.split(",");
    }

    switch (data.inputType) {
      case "Text":
        textList.add(TextEditingController());
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(data.item ?? ""),
            SizedBox(height: 10),
            TextFormField(
              controller: controller.nameController.value,  //should I use index???
              decoration: InputDecoration(
                border: InputBorder.none,
                isDense: true,
                contentPadding: EdgeInsets.symmetric(),
              ),
              cursorColor: Colors.green,
              style: TextStyle(color: Colors.grey),
            ),
          ],
        );

  
      case "Radio Button":
        return Row(children: [
          Expanded(child: Text(data.item ?? "")),
          Expanded(
              child: ConstrainedBox(
                  constraints: BoxConstraints(maxHeight: 200.0),
                  child: ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: datas.length,
                      itemBuilder: (context, index) {
                        return Obx(() => Row(children: [
                              Radio(
                                activeColor: Colors.orange,
                                value: datas[index].toString(),
                                groupValue: controller.radioValue[data.id],
                                onChanged: (value) {
                                  controller.radioValue[data.id!] =
                                      value.toString();
                                },
                              ),
                              Text(datas[index]),
                            ]));
                      })))
        ]);

      default:
        return Text("Error");
    }
  }

截屏

当单击 appBar 图标按钮时，如何获取data.id和TextField值为24的值，后者为gvbvcxx ？

我应该为此使用 hashMap 吗？

Answer 1

是的你应该。 你已经有了一张地图，你可以使用它。 问题是您试图直接更新 UI，这不是一个好习惯。 相反，您应该更新数据，GetX 将更新 UI。

1. 将数据对象存储在 UI 之外。 喜欢班级成员。

2. 使对象具有反应性，例如： late Rx<Map?> controller = Rx(null)

3. 当用户按下单选按钮时更新对象：

    Radio( activeColor: Colors.orange, value: datas[index].toString(), groupValue: controller.radioValue[data.id], onChanged: (value) { // controller.radioValue[data.id!] = value.toString(); controller.value.radioValue[data.id!] = value.toString(); }, ),

就这些。 当您更新数据时，您的 UI 将被更新。