獲取列表視圖值抖動

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 將被更新。