Flutter技术问题：无法将Dropdown列表值同步至TextField

问题分析 #

你的代码存在几个核心问题导致同步失败：

• 变量名混乱：混用_meals_state、_mealState、_meal_state，变量名不一致导致状态无法关联
• TextField控制器错误：每次build时新建TextEditingController()会丢失输入状态，且无法实时同步外部值
• Dropdown的onChanged逻辑无效：当前代码里_meal_state = _mealState是无效赋值，没有把选中值绑定到变量

修正后的完整代码 #

// 在你的State类中声明成员变量
late TextEditingController _stateController;
String? _selectedState;

@override
void initState() {
  super.initState();
  // 初始化控制器，绑定初始值
  _stateController = TextEditingController(text: _selectedState);
}

@override
void dispose() {
  // 销毁控制器避免内存泄漏
  _stateController.dispose();
  super.dispose();
}

// 生成Dropdown选项列表
List<DropdownMenuItem<String>> getStatesList() {
  return stateInitials.map((state) {
    return DropdownMenuItem(
      value: state,
      child: Text(state),
    );
  }).toList();
}

// build方法中的Widget实现
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Container(height: 18),
      Container(
        height: 68,
        width: 80,
        child: TextField(
          maxLength: 4,
          autofocus: true,
          inputFormatters: [
            UpperCaseTextFormatter(),
          ],
          controller: _stateController,
          decoration: const InputDecoration(
            icon: Icon(Icons.text_fields),
            hintText: 'meals_state',
            labelText: 'Meals State: ',
            border: OutlineInputBorder(),
          ),
          onChanged: (String value) {
            _selectedState = value;
          },
        ),
      ),
      DropdownButton<String>(
        menuMaxHeight: 600,
        hint: const Text("Select State"),
        value: _selectedState,
        items: getStatesList(),
        onChanged: (String? value) {
          setState(() {
            _selectedState = value;
            // 直接更新TextField的文本内容
            _stateController.text = value ?? '';
          });
        },
      ),
    ],
  );
}

// 状态缩写列表
const List<String> stateInitials = [
  "AL", "AR", "AZ", "CA", "CO", "CT", "DC", "DE", "FL", "GA",
  "IA", "ID", "IL", "IN", "KS", "KY", "LA", "MA", "MD", "ME",
  "MI", "MN", "MO", "MS", "MT", "NC", "NE", "NH", "NJ", "NM",
  "NV", "NY", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN",
  "TX", "UT", "VA", "VT", "WA", "WI", "WV", "WY",
];

关键修改说明 #

1. 统一状态变量：用_selectedState统一管理选中值，同时关联TextField和Dropdown
2. 控制器生命周期管理：在initState中初始化控制器，dispose中销毁，避免内存泄漏
3. 双向同步逻辑：
   • Dropdown选中时，更新_selectedState并直接设置_stateController.text同步到TextField
   • TextField输入时，更新_selectedState保证Dropdown的选中值和输入框一致

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