[英]Flutter DropdownButton widget with Getx
我正在学习 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 处理其他小部件。
首先创建您的 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(),
)
),
如果您不想使用可观察变量,请使用 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,
)
])
我想指出,我的答案基于我当前的用例,其他答案是有效的,但不适用于我的用例,所以我想分享我的修复给想要使用它的人
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
因此,如果它可以正常工作,如果有人想改进,请随时在下面发表评论
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(),
)
),
试试这个,这对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.