Flutter DateTimePicker选中日期短暂显示后恢复当前日期解决方法
问题根因
选中日期短暂显示后自动回弹为当前日期,核心原因是日期格式不匹配:
- 你给组件配置的
dateMask为dd MMMM yyyy,要求传入initialValue的日期字符串必须完全符合这个格式 - 但
onChanged回调中你把选中日期转成了dd-MM-yyyy格式再赋值给绑定的dob变量 setState触发组件重建时,组件无法解析格式不匹配的initialValue,就会自动回退显示默认的当前日期。
修复方法
核心原则是保证传给initialValue的日期值和dateMask要求的格式完全一致,如果业务逻辑需要其他格式的日期串,单独用变量存储,不要覆盖组件绑定的变量。
修复后的可正常运行代码如下:
Card( color: Colors.blue[50], margin: EdgeInsets.only(left: 20, top: 5, right: 20), shape: RoundedRectangleBorder( side: BorderSide(color: Colors.black54, width: 1), ), child: Container( margin: EdgeInsets.only(left: 30, top: 5, right: 30, bottom: 10), child: DateTimePicker( validator: (val) => val == null ? "Please pick date of birth" : null, cursorColor: Color(0xFF75101D), type: DateTimePickerType.date, dateMask: 'dd MMMM yyyy', initialValue: dob, // 传入的dob必须符合dd MMMM yyyy格式 lastDate: DateTime(2100), icon: Icon(Icons.event), dateLabelText: 'Date of Birth', onChanged: (val) { setState(() { // 直接赋值组件返回的、符合mask格式的选中值 dob = val; // 若业务需要dd-MM-yyyy格式的日期,单独定义变量存储即可,不要修改dob // DateTime selectDate = DateTime.parse(val); // String businessFormatDob = DateFormat('dd-MM-yyyy').format(selectDate); }); }, firstDate: DateTime(1950), ), ), )
额外注意事项
- 初始化
dob变量时,要么设为null让组件默认展示空态,要么传入符合dd MMMM yyyy格式的字符串,不要传格式不匹配的初始值 - 不要随意修改
onChanged回调中传给绑定变量的值格式,必须和dateMask规则对齐
内容的提问来源于stack exchange,提问作者Vidya B H
相关产品推荐
相关产品推荐

