Flutter下拉菜单如何使用数值选项而非字符串选项？

其实在Flutter里实现数值类型的下拉菜单非常简单，根本不需要把数值转成字符串来存储——DropdownButton和DropdownMenuItem本身就支持任意类型的value，包括int、double这类数值类型。核心思路就是：用数值作为选项的value，在显示的时候把数值转换成字符串即可。

完整示例代码（以int类型为例） #

下面是一个状态ful widget的完整实现，演示如何使用整数作为下拉菜单的选项：

import 'package:flutter/material.dart';

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

  @override
  State<NumericDropdownExample> createState() => _NumericDropdownExampleState();
}

class _NumericDropdownExampleState extends State<NumericDropdownExample> {
  // 选中的数值，类型为int?，初始值为null
  int? _selectedNumber;
  // 下拉菜单的数值选项列表
  final List<int> _numberOptions = [1, 2, 3, 4, 5, 10, 15];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('数值下拉菜单示例')),
      body: Center(
        child: DropdownButton<int>(
          // 指定泛型为int，确保类型安全
          value: _selectedNumber,
          hint: const Text('请选择一个数值'),
          // 选中后的回调，参数newValue是int类型，直接使用即可
          onChanged: (int? newValue) {
            setState(() {
              _selectedNumber = newValue;
            });
            // 这里可以直接对数值进行操作，无需类型转换
            if (newValue != null) {
              print('选中的数值是: $newValue，乘以2的结果是: ${newValue * 2}');
            }
          },
          // 生成下拉选项：遍历数值列表，每个选项的value是数值本身，显示时转成字符串
          items: _numberOptions.map((int number) {
            return DropdownMenuItem<int>(
              value: number, // 这里直接传入int类型的数值
              child: Text(number.toString()), // 显示时转换成字符串
              // 如果需要自定义显示文本，比如"数值1"，可以这么写：
              // child: Text('数值$number'),
            );
          }).toList(),
        ),
      ),
    );
  }
}

关键点说明 #

• 泛型约束：给DropdownButton指定泛型（比如DropdownButton<int>），这样value和onChanged的参数都会被约束为对应的数值类型，避免类型错误。
• 选项的value：DropdownMenuItem的value直接传入数值类型（int/double），不需要做任何转换。
• 显示逻辑：在DropdownMenuItem的child中，通过toString()把数值转换成字符串，或者根据需求自定义显示文本。

适配double类型的情况 #

如果需要使用浮点数作为选项，只需要把代码中的int替换成double即可，比如：

double? _selectedDouble;
final List<double> _doubleOptions = [1.5, 2.0, 3.7, 5.2];

// 对应的DropdownButton
DropdownButton<double>(
  value: _selectedDouble,
  onChanged: (double? newValue) {
    setState(() {
      _selectedDouble = newValue;
    });
  },
  items: _doubleOptions.map((double number) {
    return DropdownMenuItem<double>(
      value: number,
      child: Text(number.toString()),
    );
  }).toList(),
)

这样实现的下拉菜单，选项的底层值是纯数值类型，选中后可以直接进行数值计算、存储等操作，完全不需要额外的类型转换，既安全又方便。

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