带有 Getx 的 Flutter DropdownButton 小部件答案

【问题标题】：Flutter DropdownButton widget with Getx带有 Getx 的 Flutter DropdownButton 小部件
【发布时间】：2021-06-07 23:14:03
【问题描述】：

我正在学习 GetX 状态管理并偶然发现了 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 处理其他小部件。

【问题讨论】：

标签： flutter dropdownbutton flutter-getx

【解决方案1】：

首先创建你的控制器类。

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

【讨论】：

我收到以下错误以下断言在构建 Obx(dirty, state: _ObxState#829ce): 应该只有一项具有 [DropdownButton] 的值: 。检测到 0 个或 2 个或多个 [DropdownMenuItem] 具有相同的值 'package:flutter/src/material/dropdown.dart'：断言失败：第 850 行 pos 15：'items == null ||项目.isEmpty ||值 == 空 || items.where((DropdownMenuItem item) {
“value:”参数必须是传递给 Dropdown 的值列表（items 参数）之一，或者为 null，以便显示提示参数值。
是的，我想通了，我们是否有机会默认值，就像它的空字段一样。

【解决方案2】：

如果您不想使用可观察变量，则使用 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,
        )
    ])

【讨论】：