如何在下拉菜单中显示地图？

Question

我需要实现一个下拉列表，您可以在其中 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: ...,
        ),
      ),
    );
  }
}

Answer 1

根据您的结果屏幕，我尝试使用 List 而不是 Map 希望它对您有所帮助。

你必须使用 dropdown_below 来自 here

创建您的列表：

  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'},
  ];

一个varibale并列出我们的价值

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;
               });
            },
          ),
        ),

你的下拉按钮->

您的下拉列表数据->

你可以参考我同样的回答 and , If you put map so refer 回答

如何在下拉菜单中显示地图？

How to display Map in dropdown flutter?

dart

flutter