Flutter 帶有 Getx 的 DropdownButton 小部件

Question

我正在學習 GetX state 管理並偶然發現了 DropdownButton 小部件。 無法觀察到如何使用所選值更新所選值。 這是我的 DropdownButton 小部件

              DropdownButton(
                  hint: Text(
                    'Book Type',
                  ),
                  onChanged: (newValue) {
                    print(newValue);
                  },
                  value: selectedType,
                  items: bookController.listType.map((selectedType) {
                    return DropdownMenuItem(
                      child: new Text(
                        selectedType,
                      ),
                      value: selectedType,
                    );
                  }).toList(),
                ),

這

var selectedType;

在小部件構建中聲明。 我試圖使這個變量可觀察，但布局會引發溢出錯誤。 我也用 obx 包裝了這個小部件，但它仍然拋出了同樣的錯誤。 這個小部件究竟是如何使用 GetX 實現的。 我在這里拉頭發。 我可以使用 getX 處理其他小部件。

Answer 1

首先創建您的 controller class。

class BookController extends GetxController {

   // It is mandatory initialize with one value from listType
   final selected = "some book type".obs;

   void setSelected(String value){
     selected.value = value;
   }

}

在視圖上，實例化您的 Controller 並使用 Obx 小部件包裝 DropdownButton：

    BookController bookcontroller = BookController();
    
    Obx( () => DropdownButton(
                      hint: Text(
                        'Book Type',
                      ),
                      onChanged: (newValue) {
                        bookController.setSelected(newValue);
                      },
                      value: bookController.selected.value,
                      items: bookController.listType.map((selectedType) {
                        return DropdownMenuItem(
                          child: new Text(
                            selectedType,
                          ),
                          value: selectedType,
                        );
                      }).toList(),
                    )
),

Answer 2

如果您不想使用可觀察變量，請使用 getBuilder 包裝您的下拉列表並在 onChange function 中更新您的 controller 就像

               onChanged: (newValue) {
                     bookController.currentDropdownValue=newValue;
                    bookController.update();
                  },

例子

//Controller
class HomeController extends GetxController {
 var selectedDrowpdown = 'abc';
 List dropdownText = ['abc', 'def', 'ghi'];
  }
    //dropdown button in Ui 
  DropdownButton(
    hint: Text(
      'Book Type',
    ),
    onChanged: (newValue) {
      homeController.selectedDrowpdown=newValue;
      homeController.update();
    },
    value: homeController.selectedDrowpdown,
    items: [
      for (var data in homeController.dropdownTextList)
        DropdownMenuItem(
          child: new Text(
            data,
          ),
          value: data,
        )
    ])

Answer 3

我想指出，我的答案基於我當前的用例，其他答案是有效的，但不適用於我的用例，所以我想分享我的修復給想要使用它的人

on Controller 
String selectedWallet = "";

@override
  Future<void> onInit() async {
    super.onInit();
    fillSelectedWallet();
  }

fillSelectedWallet() {
    if (walletCntrl.walletList.isNotEmpty) {
      selectedWallet = walletCntrl.walletList[0].walletName;
    }
  }

在用戶界面上

DropdownButton<String>(
                        icon: const Icon(
                          Icons.arrow_drop_down_outlined,
                          color: Colors.black,
                        ),
                        iconSize: 22.h,
                        style:
                            styleHeadLine.copyWith(fontSize: setFontSize(16)),
                        underline: Container(
                          height: 0.0,
                          color: Colors.transparent,
                        ),
                        onChanged: (String? newValue) {
                          setState(() {
                            pieData.setWallet(newValue!);
                            pieData.update();
                          });
                        },
                        value: pieData.pieMainWallet,
                        items: walletData.walletList
                            .map((e) => e.walletName)
                            .map<DropdownMenuItem<String>>((String newMode) {
                          return DropdownMenuItem<String>(
                            child: Text(newMode),
                            value: newMode,
                          );
                        }).toList(),
                      ),

到目前為止有什么區別？？ 差異基於無法接受 RxString 的下拉菜單項的值我嘗試將轉換 controller.selectedvalue 作為字符串但無法使其工作那么為什么我仍然使用 setState 而不是 getBuilder？ 我已經使用 getBuilder 但下拉菜單 dsnt 中的文本項想要更改，因為上帝知道為什么，值更改但不是 UI

因此，如果它可以正常工作，如果有人想改進，請隨時在下面發表評論

Answer 4

final selected = "".obs;

BookController bookcontroller = BookController();
    
Obx( () => DropdownButton(
                  hint: Text(
                    'Book Type',
                  ),
                  onChanged: (newValue) {
                    bookController.setSelected(newValue);
                  },
                  value: bookController.selected.value==""?null:bookController.selected.value,
                  items: bookController.listType.map((selectedType) {
                    return DropdownMenuItem(
                      child: new Text(
                        selectedType,
                      ),
                      value: selectedType,
                    );
                  }).toList(),
                )
),

試試這個，這對我有用。