SwiftUI实现点击日期列表项动态更新视图（不跳转页面）

问题描述 #

我有一个用于展示日期的横向滚动列表（默认选中index为2的日期项），当前使用以下代码生成：

func generateDateListView() -> some View{
        return ScrollView(.horizontal, showsIndicators: false){
            HStack(spacing: 6){
                ForEach(1...7, id:\.self){ index in
                    if index == 2{
                        singlePickedDate(isSelected: true)
                    }
                    else{
                        singlePickedDate(isSelected: false)
                    }
                }
            }
        }
    }

我不想用NavigationLink跳转到新页面，而是希望点击日期项时切换选中状态（显示白色圆圈样式），并在当前页面基于选中的日期动态生成对应内容，目前不清楚如何实现选中逻辑。

解决方案 #

核心思路是用@State变量管理当前选中的索引，通过点击事件更新变量，让SwiftUI自动刷新视图切换选中状态：

1. 在你的视图结构体中添加一个@State变量，用来存储当前选中的日期索引：

@State private var selectedDateIndex = 2 // 默认选中index为2的项

2. 修改generateDateListView方法，把硬编码的选中判断替换为基于selectedDateIndex的逻辑，同时给每个日期项添加点击手势来更新选中索引：

func generateDateListView() -> some View{
    ScrollView(.horizontal, showsIndicators: false){
        HStack(spacing: 6){
            ForEach(1...7, id:\.self){ index in
                singlePickedDate(isSelected: index == selectedDateIndex)
                    .onTapGesture {
                        selectedDateIndex = index // 点击时更新选中索引
                    }
            }
        }
    }
}

3. 确保singlePickedDate视图能根据isSelected参数切换样式（以白色圆圈为例）：

func singlePickedDate(isSelected: Bool, index: Int) -> some View {
    // 替换成你实际的日期展示文本，比如"10/05"这类格式
    Text("Day \(index)")
        .padding(.vertical, 8)
        .padding(.horizontal, 12)
        .background(isSelected ? Circle().fill(Color.white) : Circle().stroke(Color.gray))
        .foregroundColor(isSelected ? Color.black : Color.gray)
}

这样设置后，点击任意日期项都会更新selectedDateIndex，视图会自动刷新并切换选中样式。之后你就可以通过selectedDateIndex来获取对应日期，生成动态内容。

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