Flutter修改selectedDateTime后Container未即时更新的问题

核心原因 #

你修改selectedDateTime时，没有通过setState()通知Flutter框架状态发生变化，导致UI没有触发重建。只有点击TextField时，框架因其他操作触发了重建，才会更新Container的显示。

解决步骤 #

1. 确保selectedDateTime是State类的成员变量 #

首先要确认selectedDateTime是当前Widget对应State类的成员，而非局部变量或其他类的变量：

class _YourReminderWidgetState extends State<YourReminderWidget> {
  // 定义为State成员，才能被setState管理
  DateTime? selectedDateTime;

  @override
  Widget build(BuildContext context) {
    // 你的build代码，包含原有的Container切换逻辑
    return ...;
  }
}

2. 修改selectedDateTime时必须包裹在setState中 #

无论你是通过日期选择器还是其他方式设置selectedDateTime，都要把赋值操作放在setState((){})内部，这样才能触发UI重建：

// 示例：点击Set Reminder触发日期选择的代码
GestureDetector(
  onTap: () async {
    // 假设使用系统日期选择器
    final DateTime? pickedDate = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime.now(),
      lastDate: DateTime(2030),
    );
    if (pickedDate != null) {
      final TimeOfDay? pickedTime = await showTimePicker(
        context: context,
        initialTime: TimeOfDay.now(),
      );
      if (pickedTime != null) {
        // 必须用setState包裹赋值操作
        setState(() {
          selectedDateTime = DateTime(
            pickedDate.year,
            pickedDate.month,
            pickedDate.day,
            pickedTime.hour,
            pickedTime.minute,
          );
        });
      }
    }
  },
  child: // 原有的Set Reminder Container
)

3. 确认现有移除逻辑的正确性 #

你的代码中点击移除按钮时已经正确使用了setState，这部分无需修改，只需要保证设置selectedDateTime的地方遵循同样规则即可。

验证 #

修改后，当你设置完日期时间，selectedDateTime的变化会立即触发build方法重新执行，对应的Container会即时切换显示状态，无需再点击TextField。

内容的提问来源于stack exchange，提问作者Malik Muhammad Aman