带有 Getx 的 Flutter DropdownButton 小部件

如何解决带有 Getx 的 Flutter DropdownButton 小部件

我正在学习 GetX 状态管理并偶然发现 DropdownButton 小部件。无法观察到如何使用所选值更新所选值。这是我的 DropdownButton 小部件

8 8 8 8 
7 7 7 
6 6 
5 

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

在小部件构建中声明。我试图使这个变量可观察，但布局会引发溢出错误。我也用 obx 包装了小部件，但它仍然抛出相同的错误。这个小部件是如何使用 GetX 实现的。我在这里拉头发。我可以使用 getX 处理其他小部件。

解决方法

首先创建您的控制器类。

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;
   }

}

在视图上，实例化您的控制器并使用 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(),)
),

,

如果你不想使用 observable 变量，那么用 getBuilder 包装你的下拉列表，然后在 onChange 函数中更新你的控制器，就像

               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,)
    ])

,

我想指出，我的回答是基于我当前的用例 还有什么其他答案有效，但在我的用例中无效，所以我想与想要使用它的人分享我的修复

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 的下拉菜单项的值 我尝试将 cast controller.selectedvalue 作为 String 但无法使其工作 那么为什么我仍然使用 setState 而不是 getBuilder ？ 我已经使用了 getBuilder 但下拉菜单中的文本项 dsnt 想要更改天知道为什么，值更改但不是 UI

所以如果它工作正常 如果有人想改进，请随时在下面评论