TabView（PageTabViewStyle）重渲染问题：如何避免页面切换时蓝色圆圈重复渲染

问题原因分析 #

1. MonthTabItem的ID不稳定：当前用UUID()生成每个MonthTabItem的id，每次months计算属性被调用都会生成新的UUID，导致ForEach判定每个月份项都是新元素，反复销毁重建MonthView，进而引发选中标记（蓝色圆圈）重复渲染。
2. 视图重建导致状态重复：视图频繁重建时，原有的选中状态未被正确清理或复用，新视图初始化时会重复绘制标记。

解决方案 #

1. 替换不稳定ID，用日期作为唯一标识

修改MonthTabItem的初始化逻辑，基于月份日期生成固定id，避免每次生成新UUID：

private var months: [MonthTabItem] {
    let dates = calendar.generateDates(
        inside: interval,
        matching: DateComponents(day: 1, hour: 0, minute: 0, second: 0)
    )
    return dates.enumerated().map { index, date in
        MonthTabItem(
            id: date.timeIntervalSince1970, // 用日期时间戳作为固定唯一ID
            tag: index,
            month: date
        )
    }
}

同步调整MonthTabItem的id类型：

struct MonthTabItem: Identifiable {
    let id: TimeInterval
    let tag: Int
    let month: Date
}

2. 统一管理选中状态

将选中日期作为绑定参数传入MonthView，避免视图内部维护独立状态导致重复：

struct MonthView: View {
    let month: Date
    @Binding var selectedDate: Date? // 外部传入绑定的选中日期
    let content: (Date) -> View
    
    // ... 其他视图代码
}

在TabView中使用时传入绑定：

TabView(selection: $num){
    ForEach(months) { month in
        MonthView(
            month: month.month,
            selectedDate: $selectedDate,
            content: self.content
        )
        .tag(month.tag)
    }
}
.tabViewStyle(.page(indexDisplayMode: .never))

3. 优化TabView渲染行为

添加id修饰符确保切换分页时仅刷新目标视图：

TabView(selection: $num){
    // ... 原有内容
}
.tabViewStyle(.page(indexDisplayMode: .never))
.id(num)

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