如何实现月份列表联动，让第二个dropdown仅展示第一个选中值之后的月份

• 先获取第一个下拉框选中月份在全量月份列表中的索引位置
• 第二个下拉框的可选列表直接取全量列表从该索引+1的位置开始的子数组即可（如果要包含选中月份本身就从索引位置开始）
• 每次第一个下拉框选中值变化时，触发更新第二个下拉框的可选列表，同时重置第二个下拉框的选中值，避免出现选中值不在可选列表里的异常

第一步：定义基础变量 #

// 全量月份列表
final List<String> allMonths = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
];
// 第一个下拉框（toDate）选中值
String? selectedToDate;
// 第二个下拉框（fromDate）选中值
String? selectedFromDate;
// 第二个下拉框可选月份列表
List<String> availableFromMonths = [];

第二步：编写第一个下拉框选中变化的处理逻辑 #

void onToDateChanged(String? newValue) {
  if (newValue == null) return;
  selectedToDate = newValue;
  // 获取选中月份的索引
  int selectedIndex = allMonths.indexOf(newValue);
  // 生成第二个下拉的可选列表：取选中月份之后的所有值
  availableFromMonths = allMonths.sublist(selectedIndex + 1);
  // 重置第二个下拉的选中值，避免旧值不在新列表里报错
  selectedFromDate = null;
  // StatefulWidget 中需要调用 setState 更新UI
  setState(() {});
}

第三步：编写下拉框组件代码 #

// 第一个下拉框 toDate
DropdownButton<String>(
  value: selectedToDate,
  hint: const Text('选择toDate'),
  items: allMonths.map((month) {
    return DropdownMenuItem(
      value: month,
      child: Text(month),
    );
  }).toList(),
  onChanged: onToDateChanged,
)

// 第二个下拉框 fromDate
DropdownButton<String>(
  value: selectedFromDate,
  hint: const Text('选择fromDate'),
  items: availableFromMonths.map((month) {
    return DropdownMenuItem(
      value: month,
      child: Text(month),
    );
  }).toList(),
  onChanged: (newValue) {
    selectedFromDate = newValue;
    setState(() {});
  },
)

如果你需要第二个下拉框包含第一个选中的月份本身，只需要把allMonths.sublist(selectedIndex + 1)改成allMonths.sublist(selectedIndex)即可。

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