Flutter中DropdownButton同时使用int与string值的实现求助

要同时获取DropdownMenuItem对应的int值和显示的string文本，最简洁的方式是创建一个数据类来封装这两个关联值，而非单独存储int。选中项时可直接拿到包含双值的对象，轻松调用对应属性。

步骤1：定义数据类 #

创建类保存每个选项的数值与文本：

class SizeOption {
  final int value;
  final String label;

  SizeOption({required this.value, required this.label});
}

步骤2：重构选中变量与下拉选项列表 #

将原有selectedValue改为SizeOption类型，同时重构下拉选项列表：

// 默认选中第一个选项
SizeOption selectedOption = SizeOption(value: 10, label: 'Small');

List<DropdownMenuItem<SizeOption>> dropdownItems = [
  DropdownMenuItem(
    value: SizeOption(value: 10, label: 'Small'),
    child: Text(
      'Small',
      style: TextStyle(
        fontSize: 20,
        fontFamily: 'Inconsolata',
        fontWeight: FontWeight.bold,
        color: Color(0xCBFDC4AB),
      ),
    ),
  ),
  const DropdownMenuItem(
    value: SizeOption(value: 20, label: 'Medium'),
    child: Text(
      'Medium',
      style: TextStyle(
        fontSize: 20,
        fontFamily: 'Inconsolata',
        fontWeight: FontWeight.bold,
        color: Color(0xCBFDC4AB),
      ),
    ),
  ),
  const DropdownMenuItem(
    value: SizeOption(value: 30, label: 'Large'),
    child: Text(
      'Large',
      style: TextStyle(
        fontSize: 20,
        fontFamily: 'Inconsolata',
        fontWeight: FontWeight.bold,
        color: Color(0xCBFDC4AB),
      ),
    ),
  ),
];

步骤3：更新DropdownButton组件 #

修改DropdownButton泛型为SizeOption，并在onChanged中更新选中对象：

DropdownButton<SizeOption>(
  value: selectedOption,
  items: dropdownItems,
  dropdownColor: Colors.brown,
  underline: Container(
    height: 3,
    color: const Color(0xCBFDC4AB),
  ),
  icon: Icon(
    CupertinoIcons.arrowtriangle_down_fill,
    color: const Color(0xCBFDC4AB),
    size: 10,
    shadows: [
      Shadow(
        color: Colors.yellow.withOpacity(0.9),
        blurRadius: 10,
      )
    ],
  ),
  onChanged: (SizeOption? newOption) {
    setState(() {
      selectedOption = newOption!;
    });
  },
),

步骤4：分别调用int值与string值 #

通过selectedOption直接获取两个值：

// 显示int值的文本组件
Text(
  "\$${selectedOption.value}",
  style: const TextStyle(
    fontSize: 40,
    fontFamily: 'Inconsolata',
    fontWeight: FontWeight.bold,
    color: Color(0xADFFF0E8),
  ),
),

// 显示string值的文本组件
Text(selectedOption.label),

补充：优化选项列表写法 #

若选项较多，可通过循环简化列表创建，避免重复代码：

// 定义原始数据列表
final List<Map<String, dynamic>> sizeData = [
  {'value': 10, 'label': 'Small'},
  {'value': 20, 'label': 'Medium'},
  {'value': 30, 'label': 'Large'},
];

// 生成DropdownMenuItem列表
List<DropdownMenuItem<SizeOption>> dropdownItems = sizeData.map((item) {
  return DropdownMenuItem(
    value: SizeOption(value: item['value'], label: item['label']),
    child: Text(
      item['label'],
      style: TextStyle(
        fontSize: 20,
        fontFamily: 'Inconsolata',
        fontWeight: FontWeight.bold,
        color: Color(0xCBFDC4AB),
      ),
    ),
  );
}).toList();

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