Flutter中使用Getx实现下拉菜单(DropdownButton)小部件

Question

我正在学习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;

在widget build中声明了一个变量。我试图将这个变量设置为可观察的，但是布局会抛出溢出错误。我还用obx包装了这个小部件，但仍然会抛出相同的错误。如何使用GetX准确实现此小部件。我正在拼命地尝试解决，我可以使用GetX处理其他小部件。

- Hanis

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

- djalmafreestyler

---

我遇到了以下错误：在构建 Obx(dirty, state: _ObxState#829ce) 时，出现以下断言：[DropdownButton] 的值应该恰好只有一个。检测到值相同的 [DropdownMenuItem] 数量为零或两个或更多。'package:flutter/src/material/dropdown.dart': 断言失败：位于第 850 行第 15 列：'items == null || items.isEmpty || value == null || items.where((DropdownMenuItem<T> item) { - Arul

"value:"参数必须是传递给下拉菜单的值列表（“items” 参数）中的一个，或者为空，以便显示“hint”参数的值。 - djalmafreestyler

我明白了，有没有可能我们可以默认一个值，就像它是空的一样。 - Arul

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

- Muhammad Sheraz

Answer 3

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

试试这个，这对我有用。

- Sharad Gore