如何在Flutter中制作自定义日历并关联真实日历获取正确日期

核心思路 #

要把ListView和真实日历关联，关键是基于系统日期API生成对应月份/时间段的日期数据集合，再把数据绑定到ListView的每一项上，同时计算每个日期对应的星期几。

具体步骤 #

1. 生成目标时间段的日期数据 #

以Android平台为例（其他平台思路通用），可以用Java 8+的LocalDate类生成指定月份的所有日期：

// 获取当前月份的第一天
LocalDate firstDayOfMonth = LocalDate.now().with(TemporalAdjusters.firstDayOfMonth());
// 获取当前月份的最后一天
LocalDate lastDayOfMonth = LocalDate.now().with(TemporalAdjusters.lastDayOfMonth());

// 生成该月份的所有日期列表
List<LocalDate> dateList = new ArrayList<>();
LocalDate currentDate = firstDayOfMonth;
while (!currentDate.isAfter(lastDayOfMonth)) {
    dateList.add(currentDate);
    currentDate = currentDate.plusDays(1);
}

2. 计算每个日期对应的星期 #

直接通过日期API获取星期值，再转换成易读的文字格式：

// 自定义数据类，存储日期相关信息
class CalendarItem {
    private int day;
    private String weekStr;
    private LocalDate fullDate;

    public CalendarItem(int day, String weekStr, LocalDate fullDate) {
        this.day = day;
        this.weekStr = weekStr;
        this.fullDate = fullDate;
    }

    // 省略getter方法
}

// 遍历日期列表，生成带星期的数据集
List<CalendarItem> calendarItems = new ArrayList<>();
for (LocalDate date : dateList) {
    DayOfWeek dayOfWeek = date.getDayOfWeek();
    String weekStr = switch (dayOfWeek) {
        case MONDAY -> "周一";
        case TUESDAY -> "周二";
        case WEDNESDAY -> "周三";
        case THURSDAY -> "周四";
        case FRIDAY -> "周五";
        case SATURDAY -> "周六";
        case SUNDAY -> "周日";
    };
    calendarItems.add(new CalendarItem(date.getDayOfMonth(), weekStr, date));
}

3. 绑定数据到ListView #

将生成的数据集传给ListView的适配器，在适配器中把日期、星期信息显示到对应控件：

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        convertView = LayoutInflater.from(context).inflate(R.layout.calendar_item_layout, parent, false);
    }
    TextView dayTv = convertView.findViewById(R.id.tv_day);
    TextView weekTv = convertView.findViewById(R.id.tv_week);
    
    CalendarItem item = calendarItems.get(position);
    dayTv.setText(String.valueOf(item.getDay()));
    weekTv.setText(item.getWeekStr());
    
    return convertView;
}

4. 跨月份空白填充（可选） #

如果需要像传统日历那样，用上月末尾、下月开头的日期填满整行（比如当月1号是周三，补上上月最后两天），可以调整日期生成逻辑：

// 定位到当月第一个星期的第一天（以周一为例）
LocalDate startDate = firstDayOfMonth;
while (startDate.getDayOfWeek() != DayOfWeek.MONDAY) {
    startDate = startDate.minusDays(1);
}
// 定位到当月最后一个星期的最后一天（以周日为例）
LocalDate endDate = lastDayOfMonth;
while (endDate.getDayOfWeek() != DayOfWeek.SUNDAY) {
    endDate = endDate.plusDays(1);
}
// 重新生成包含填充日期的完整列表
List<LocalDate> fullDateList = new ArrayList<>();
LocalDate tempDate = startDate;
while (!tempDate.isAfter(endDate)) {
    fullDateList.add(tempDate);
    tempDate = tempDate.plusDays(1);
}

之后在适配器中，可根据日期是否属于当前月份，设置不同的文字样式（比如非当月日期设为灰色）。

其他平台参考 #

• iOS：用NSCalendar和NSDate生成日期数据，通过UITableView展示，逻辑和Android一致。
• Flutter：用DateTime类生成日期列表，通过ListView.builder构建列表项，可借助intl包的DateFormat.EEEE()方法快速获取星期文字。

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