如何将键值数组绑定到Flutter DropdownButton，以键为值、值为标签？

没问题，我来帮你搞定这个需求！你想要把Map里的键作为下拉选项的实际值，对应的值作为显示标签，其实只需要把Map转换成DropdownButton需要的DropdownMenuItem列表，再配合状态管理就能实现。

下面是完整的可运行代码示例：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("DropdownButton 示例")),
        body: const DropdownExample(),
      ),
    );
  }
}

class DropdownExample extends StatefulWidget {
  const DropdownExample({super.key});

  @override
  State<DropdownExample> createState() => _DropdownExampleState();
}

class _DropdownExampleState extends State<DropdownExample> {
  // 你的键值Map数据
  final Map<String, String> items = {
    '1': 'item 1',
    '2': 'item 2',
    '3': 'item 3',
    '4': 'item 4',
    '5': 'item 5'
  };

  // 维护当前选中的键（实际值）
  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: DropdownButton<String>(
        // 设置当前选中的值
        value: selectedValue,
        // 设置提示文本（当没有选中值时显示）
        hint: const Text("请选择一项"),
        // 展开时的最大高度
        elevation: 8,
        // 下拉菜单的宽度和父组件一致
        isExpanded: true,
        // 将Map转换为DropdownMenuItem列表
        items: items.entries.map((entry) {
          return DropdownMenuItem<String>(
            // 这里的value是实际要保存的键
            value: entry.key,
            // 这里的child是显示给用户看的标签
            child: Text(entry.value),
          );
        }).toList(),
        // 选中项改变时的回调
        onChanged: (String? newValue) {
          setState(() {
            selectedValue = newValue;
          });
          // 这里可以处理选中后的逻辑，比如打印选中的键
          print("选中的实际值：$newValue");
        },
      ),
    );
  }
}

关键要点解释： #

• Map转DropdownMenuItem：通过items.entries遍历Map的键值对，每个entry.key作为DropdownMenuItem的value（实际业务值），entry.value作为显示的文本。
• 状态管理：用selectedValue变量维护当前选中的键，通过setState更新状态来刷新UI。
• 可选优化：如果需要默认选中某一项，可以初始化selectedValue为对应的键，比如selectedValue = '1';。

这样就能完美实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者Huzzi