Flutter中DropdownButton选中项不显示问题排查

问题根源 #

代码里的selecteditem和taskpriority定义在build方法内部，每次调用setState触发UI重建时，build方法会重新执行，这两个变量都会被重新初始化——selecteditem回到null，导致选中的选项状态无法保留，界面也就无法展示已选中的内容。

修复代码 #

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

  @override
  State<TaskTitleDiaglogscreen> createState() => _TaskTitleDiaglogscreenState();
}

class _TaskTitleDiaglogscreenState extends State<TaskTitleDiaglogscreen> {
  // 将变量移至State类成员位置，避免UI重建时重置
  final taskpriority = [
    'Urgent',
    'High priority',
    'Important',
    'Medium priority',
    'Not important',
    'Low priority',
  ];
  String? selecteditem;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          InputDecorator(
            decoration: InputDecoration(
              labelText: 'Select Priority',
              labelStyle: TextStyle(fontSize: 20),
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(20.0)),
              contentPadding: EdgeInsets.all(10),
            ),
            child: ButtonTheme(
              materialTapTargetSize: MaterialTapTargetSize.padded,
              child: DropdownButton(
                value: selecteditem,
                isExpanded: true,
                icon: Icon(Icons.keyboard_double_arrow_down_rounded),
                items: taskpriority.map(buildMenuitem).toList(),
                onChanged: (value) {
                  setState(() {
                    selecteditem = value;
                  });
                  print(selecteditem);
                },
              ),
            ),
          )
        ],
      ),
    );
  }

  DropdownMenuItem<String> buildMenuitem(String priority) => DropdownMenuItem(
        value: priority,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(priority),
            CircleAvatar(
              radius: 10,
              backgroundColor: _getColor(priority),
            )
          ],
        ),
      );

  Color _getColor(String value) {
    switch (value) {
      case 'Urgent':
        return Colors.red;
      case 'High priority':
        return Color.fromARGB(255, 243, 144, 144);
      case 'Important':
        return Colors.green;
      case 'Medium priority':
        return Colors.lightGreenAccent;
      case 'Not important':
        return Colors.blue;
      case 'Low priority':
        return Colors.lightBlueAccent;
      default:
        return Colors.black;
    }
  }
}

关键改动说明 #

• 将taskpriority和selecteditem从build方法内部移至State类的成员变量区域，确保这些变量的状态在组件整个生命周期内持续保存，不会因UI重建而被重置。
• onChanged中的setState逻辑保持不变，选中新选项时依然能正确更新selecteditem的值并触发UI刷新，此时selecteditem的状态会被保留，DropdownButton就能正常展示选中项。

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