Widget _buildEquipmentCategoriesDropdown() {
return Column(//
children: [
Align(
alignment: Alignment.centerLeft,
child: RichText(
text: TextSpan(
text: 'Equipment Categories: ',
style: Styles.blackBold16,
children: [
TextSpan(
text: '*',
style: TextStyle(
color: ColorsValue.orangeColor,
fontWeight: FontWeight.bold,
),
),
]),
),
),
Dimens.boxHeight5,
Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: const Offset(
5.0,
5.0,
),
blurRadius: 5.0,
spreadRadius: 1.0,
),
BoxShadow(
color: ColorsValue.whiteColor,
offset: const Offset(0.0, 0.0),
blurRadius: 0.0,
spreadRadius: 0.0,
),
],
color: ColorsValue.whiteColor,
borderRadius: BorderRadius.circular(5),
),
child: //
Obx(
() => MultiSelectDialogField(
initialValue:
//
controller.selectedEquipmentCategoryList,
decoration: BoxDecoration(border: Border()),
buttonIcon: Icon(Icons.arrow_drop_down),
items: controller.equipmentCategoryList
.map(
(equipmentCategory) => MultiSelectItem(
equipmentCategory?.id,
equipmentCategory?.name ?? '',
),
)
.toList(),
onConfirm: (selectedOptionsList) =>
{controller.equipmentCategoriesSelected(selectedOptionsList)},
chipDisplay: MultiSelectChipDisplay(),
),
),
),
Dimens.boxHeight20,
]);
}
更新： 控制器：
Future<void> getInventoryCategoryList(String? facilityId) async {
//// SEE HERE, THE DATA TYPE FOR BOTH THE LIST AND THE INITIAL VALUE IS THE SAME
equipmentCategoryList.value = <InventoryCategoryModel>[];
selectedEquipmentCategoryList.value = <InventoryCategoryModel>[];
selectedEquipmentCategoryNameList.value = <String>[];
//
final _equipmentCategoryList =
await editJobPresenter.getInventoryCategoryList(
isLoading: true,
);
if (_equipmentCategoryList != null) {
for (var equimentCategory in _equipmentCategoryList) {
equipmentCategoryList.add(equimentCategory);
}
//selectedEquipmentCategoryList = equipmentCategoryList;
if (jobDetailsModel.value?.equipmentCatList != null)
for (var equipCat in jobDetailsModel.value?.equipmentCatList ?? []) {
InventoryCategoryModel equipmentCategory = InventoryCategoryModel(
id: equipCat.equipmentCatId,
name: equipCat.equipmentCatName,
);
selectedEquipmentCategoryList.add(equipmentCategory);
print(selectedEquipmentCategoryList[0]);
selectedEquipmentCategoryNameList.add(equipmentCategory.name);
}
}
}
我想在多选中预先填充某些值，小部件不会这样做。 列表的数据（初始值）来自 API，然后 UI 得到更新（使用 Getx）。
选择元素的默认值可以通过使用所需选项的“selected”属性来设置。这是一个布尔属性。具有“已选择”属性的选项将默认显示在下拉列表中
当您在 Flutter 中使用 MultiSelectDialogField 时，您可以设置一个初始值，该值在对话框打开时预先选择。要设置此初始值，您需要提供您希望初始选择的项目列表。
在给定的代码中，MultiSelectDialogField 的 initialValue 参数设置为 [controller.selectedEquipmentCategoryList]。这意味着存储在 controller.selectedEquipmentCategoryList 变量中的所选设备类别列表将用作下拉列表的初始值。
所以当用户打开下拉列表时，controller.selectedEquipmentCategoryList 中的项目已经被选中，用户可以根据需要添加或删除其他项目。
我认为您还混淆了 Rx 作为 ObserVER 与 ObservABLE。 Rx 是一个可观察的对象，即您使用 Obx 或 GetX 小部件观察它的变化，（我想您可以将这两个小部件称为“观察者”。）
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
Controller c = Get.put(Controller());
return Scaffold(
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Obx(
() => MultiSelectDialogField(
initialValue:
//
c.selectedEquipmentCategoryList,
decoration: BoxDecoration(border: Border()),
buttonIcon: Icon(Icons.arrow_drop_down),
items: c.equipmentCategoryList
.map(
(equipmentCategory) => MultiSelectItem(
equipmentCategory?.id,
equipmentCategory?.name ?? '',
),
)
.toList(),
onConfirm: (selectedOptionsList) =>
c.update_selected(selectedOptionsList),
chipDisplay: MultiSelectChipDisplay(),
),
),
],
),
),
),
);
}
}
class Controller extends GetxController {
List equipmentCategoryList= [].obs
List selectedEquipmentCategoryList = [].obs;
void update_selected(List selectedOptionsList) =>'your code (update equipmentCategoryList)';
}
您好，希望以下回答对您有所帮助。您应该使用
GetBuilderimport 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:multi_select_flutter/multi_select_flutter.dart';
import 'MultipleController.dart';
class buldMultiFormUsingApi extends StatefulWidget {
const buldMultiFormUsingApi({Key? key}) : super(key: key);
@override
State<buldMultiFormUsingApi> createState() => _buldMultiFormUsingApiState();
}
class _buldMultiFormUsingApiState extends State<buldMultiFormUsingApi> {
final Controller controller = Get.put(Controller());
@override
void initState() {
// TODO: implement initState
super.initState();
controller.loadequipment();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(//
children: [
Align(
alignment: Alignment.centerLeft,
child: RichText(
text: TextSpan(text: 'Equipment Categories: ', children: [
TextSpan(
text: '*',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
]),
),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.white,
offset: const Offset(
5.0,
5.0,
),
blurRadius: 5.0,
spreadRadius: 1.0,
),
BoxShadow(
offset: const Offset(0.0, 0.0),
blurRadius: 0.0,
spreadRadius: 0.0,
),
],
borderRadius: BorderRadius.circular(5),
),
child: //
GetBuilder<Controller>(builder: (controller) {
return MultiSelectDialogField(
initialValue: controller.selectedEquipmentCategoryList,
decoration: BoxDecoration(border: Border()),
buttonIcon: Icon(Icons.arrow_drop_down),
items: controller.equipmentCategoryList
.map(
(equipmentCategory) => MultiSelectItem(
equipmentCategory?.id,
equipmentCategory?.name ?? '',
),
)
.toList(),
onConfirm: (selectedOptionsList) {
// write code on your selected equipment
},
chipDisplay: MultiSelectChipDisplay(),
);
}),
),
]),
),
);
}
}
控制器代码如下
import 'package:get/get.dart';
class Controller extends GetxController {
List equipmentCategoryList = [].obs;
List selectedEquipmentCategoryList = [].obs;
Future loadequipment() async {
// here ApiRequest.getequipmentCategory() call api to load equipment category
equipmentCategoryList=await ApiRequest.loadEquipment();
update();
}
}
如果你想要设备类别应该首先加载，你不想显示空列表然后在启动屏幕或主屏幕上调用
controller.loadequipment();