Flutter日期选择器选中生日后未计算并显示年龄问题求助

问题现象 #

开发Flutter日期选择器功能，选中日期后可正常显示选中的日期，但计算后的年龄无法显示。

代码问题分析 #

从提供的代码来看，存在以下几个关键错误：

• calAge方法返回值类型错误：方法声明为void，但内部却返回了age值，这会导致编译错误，方法无法正确返回计算后的年龄。
• 调用calAge时未传参且未接收返回值：在setState中调用calAge()时，没有传入必填的selectedDate参数，同时也没有将方法返回的年龄值赋值给用于显示的age变量，导致UI无法获取到计算后的年龄。
• age变量未在setState中更新：即使计算出年龄，如果没有将其赋值给类的成员变量并触发状态更新，UI也不会刷新显示年龄。

修复后的代码示例 #

1. 修正calAge方法的返回类型与逻辑 #

将方法返回类型改为int，确保能正确返回计算后的年龄：

int calAge(DateTime selectedDate) {
  DateTime currentDate = DateTime.now();
  int age = currentDate.year - selectedDate.year;
  int month1 = currentDate.month;
  int month2 = selectedDate.month;
  if (month2 > month1) {
    age--;
  } else if (month1 == month2) {
    int day1 = currentDate.day;
    int day2 = selectedDate.day;
    if (day2 > day1) {
      age--;
    }
  }
  return age;
}

2. 修正showDatePicker中的调用逻辑 #

在setState中传入selectedDate参数调用calAge，并将返回值赋值给类的成员变量age，触发UI更新：

void showDatePicker() {
  DateTime now = DateTime.now();
  DateTime mindate = DateTime(now.year - 2, now.month, now.day);
  DateTime maxdate = DateTime(now.year - 1, now.month, now.day);
  showCupertinoModalPopup(
    context: context,
    builder: (BuildContext builder) {
      return Container(
        height: MediaQuery.of(context).size.height * 0.25,
        color: Colors.white,
        child: CupertinoDatePicker(
          mode: CupertinoDatePickerMode.date,
          initialDateTime: mindate,
          onDateTimeChanged: (value) {
            if (value != null && value != selectedDate) {
              setState(() {
                selectedDate = value;
                // 传入selectedDate并将返回值赋值给age变量
                age = calAge(selectedDate);
              });
            }
          },
          maximumDate: maxdate,
          minimumDate: mindate,
        ),
      );
    });
}

3. 声明类成员变量 #

在对应的State类中添加以下成员变量，用于存储选中日期和计算后的年龄：

DateTime? selectedDate;
int? age;

4. 显示代码（无需修改） #

Text(selectedDate == null ? "" : "$selectedDate"),
Text(age == null ? "" : "$age"),

修复说明 #

1. 修正calAge方法的返回类型，使其能正确返回计算结果；
2. 在日期选择变更时，正确调用calAge并将结果赋值给age变量，同时通过setState触发UI刷新；
3. 确保类中存在selectedDate和age成员变量，用于存储选中日期和计算后的年龄。

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