[英]How to display list of map into DropdownMenuItem in Flutter
我是 Flutter 的新手。 我想從我的列表變量中顯示 DropdownMenuItem。 看看我的代碼。
// my list variable
List listUserType = [
{'name': 'Individual', 'value': 'individual'},
{'name': 'Company', 'value': 'company'}
];
// items property in DropdownMenuItem
return DropdownButtonFormField<List<Map>>(
decoration: InputDecoration(
prefixIcon: Icon(Icons.settings),
hintText: 'Organisation Type',
filled: true,
fillColor: Colors.white,
errorStyle: TextStyle(color: Colors.yellow),
),
items: listUserType.map((map) {
return DropdownMenuItem(
child: Text(map['name']),
value: map['value'],
);
}).toList());
這是我得到的結果
I/flutter (22528): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (22528): The following assertion was thrown building RegisterPage(dirty, state: RegisterPageState#5b83a):
I/flutter (22528): type 'List<DropdownMenuItem<dynamic>>' is not a subtype of type
I/flutter (22528): 'List<DropdownMenuItem<List<Map<dynamic, dynamic>>>>'
我不知道是什么導致了錯誤。
嘗試刪除<List<Map>>
return DropdownButtonFormField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.settings),
hintText: 'Organisation Type',
filled: true,
fillColor: Colors.white,
errorStyle: TextStyle(color: Colors.yellow),
),
items: listUserType.map((map) {
return DropdownMenuItem(
child: Text(map['name']),
value: map['value'],
);
}).toList());
將DropdownButtonFormField<List<Map>>
更改為DropdownButtonFormField<String>
並添加一個String
類型參數以return DropdownMenuItem<String>
我使用 YourClassView 類型的 DropDownButtonField 展示了完整的流程。 我創建了一個名為 _listMenuItems 的變量,它將保存您的 DropdownMenuItem。 您必須對它的 <DropdownMenuItem> 進行屬性轉換,否則會發生轉換錯誤。 _currentComboView 點保留了用戶從 DropdownButtonField 中選擇的 YourClassView 對象。 _loadStatusCombo 是從 initState() 覆蓋調用的。 它調用一個提供者來獲取一個名為 dataViews 的 YourClassView 對象列表。 我通過轉換和使用 map 函數將 dataViews 映射到 _listMenuItems。 確保包含 .tolist 以顯示映射結果。
YourClassView has two field: DisplayValue and DatabaseValue
YourClassView _currentComboView;
List<DropdownMenuItem> _listMenuItems =
<DropdownMenuItem<YourClassView>>[];
DropdownButtonFormField<YourClassView>(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(2.0),
),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey[800]),
hintText: "Select a Status",
fillColor: Colors.orange),
items: _listMenuItems,
isDense: true,
isExpanded: true,
value: this._currentComboView,
validator: (value) =>
value == null ? 'field required' : null,
onChanged: (YourClassView value) {
setState(() {
this._currentComboView = value;
});
}),
_loadStatusCombo() {
Provider.of<Api>(context, listen: false)
.getComboViews()
.then((dataViews) {
setState(() {
_listMenuItems =
dataViews.map<DropdownMenuItem<YourClassView>>((item) {
return DropdownMenuItem<YourClassView>(
value: item, child: Text(item.displayValue));
}).toList();
});
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.