[英]How to display Map in dropdown flutter?
我需要实现一个下拉列表,您do not need to select items
,而只需查看它。 作为替代方案,我决定使用下拉小部件,因为我不知道任何其他选项。 我遇到了一个问题,我有一个需要在下拉菜单中显示数据的地图,如何正确执行,因为它对我不起作用,我需要同时显示星期和时间(附上截图以下)? 如果您知道比使用下拉菜单更好的选择,我很想听听建议。
代码
class StatusDropdown extends StatefulWidget {
const StatusDropdown({Key? key}) : super(key: key);
@override
State<StatusDropdown> createState() => _StatusDropdown();
}
class _StatusDropdown extends State<StatusDropdown> {
String? selectedValue;
bool isChecked = false;
final Map<String, dynamic> items = {
'sun': '9:00-14:00',
'mon': '9:00-14:00',
'tus': '9:00-14:00',
'wed': 'Closed',
'thu': '00:00-24:00',
'fri': '9:00-14:00',
'sat': '9:00-14:00',
};
@override
Widget build(BuildContext context) {
return Container(
width: 141,
height: 28,
child: DropdownButtonHideUnderline(
child: DropdownButton2(
offset: const Offset(0, -12),
items: ...,
),
),
);
}
}
根据您的结果屏幕,我已经尝试使用 List 而不是 Map 希望它对您有所帮助。
你必须从here
使用dropdown_below
创建您的列表:
List dayTime = [
{'day': 'sun', 'time': '9:00-14:00'},
{'day': 'mon', 'time': '9:00-14:00'},
{'day': 'tus', 'time': '9:00-14:00'},
{'day': 'wed', 'time': 'Closed'},
{'day': 'thu', 'time': '00:00-24:00'},
{'day': 'fri', 'time': '9:00-14:00'},
{'day': 'sat', 'time': '9:00-14:00'},
];
一个变量并列出我们的价值
List<DropdownMenuItem<Object?>> _dropdownTestItems = [];
var selectedDayTime;
创建 initState() 和 dispose() 方法:
@override
void initState() {
_dropdownTestItems = buildDropdownTestItems(dayTime);
super.initState();
}
@override
void dispose() {
super.dispose();
}
在下拉列表中添加您选择的数值
List<DropdownMenuItem<Object?>> buildDropdownTestItems(List dayTime) {
List<DropdownMenuItem<Object?>> items = [];
for (var i in dayTime) {
items.add(
DropdownMenuItem(
value: i,
child: Text(
i['day'].toString() + '\t:\t' + i['time'].toString(),
style: TextStyle(color: Colors.black),
),
),
);
}
return items;
}
您的小部件:
Container(
color: Colors.white,
padding: const EdgeInsets.all(8.0),
child: DropdownBelow(
itemWidth: 150,
itemTextstyle: const TextStyle(
fontSize: 14, fontWeight: FontWeight.w400, color: Colors.black),
boxTextstyle: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.white54),
boxPadding: EdgeInsets.fromLTRB(13, 12, 13, 12),
boxWidth: 150,
boxHeight: 45,
boxDecoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
width: 1,
color: Colors.black,
),
),
icon: Icon(
Icons.arrow_downward,
color: Colors.black,
),
hint: Text(
'Select Time',
style: TextStyle(
color: Colors.black,
),
),
value: selectedDayTime,
items: _dropdownTestItems,
onChanged: (selectedTest) {
setState(() {
selectedDayTime = selectedTest;
});
},
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.