SwiftUI按钮选中后位置偏移问题排查与修复咨询

问题原因 #

选中按钮后出现位置偏移，核心原因是使用Set去重导致元素顺序不稳定。Set是无序集合，每次视图刷新时，uniqueItems的元素顺序会随机变化，ForEach基于id: \.self渲染视图，顺序变化后就会出现按钮“移位”的视觉效果。

修复步骤 #

1. 替换无序去重为有序去重：保留原数组的元素顺序，同时剔除重复项，保证ForEach渲染的视图顺序始终一致。
2. 优化勾选标记布局：将勾选标记的偏移改为基于父容器的相对定位，避免因视图尺寸变化导致的位置偏差。

修改后的完整代码 #

ScrollView(.horizontal, showsIndicators: false) {
    HStack {
        if let retrievedArray = UserDefaults.standard.stringArray(forKey: "SavedSchoolCodes") {
            // 有序去重：保留原数组顺序，移除重复项
            var seenCodes = Set<String>()
            let uniqueItems = retrievedArray.filter { seenCodes.insert($0).inserted }

            ForEach(uniqueItems, id: \.self) { item in
                if let school = schoolList.first(where: { $0.schoolCode == item }) {
                    Button {
                        viewModel.schoolCode = school.schoolCode ?? ""
                    } label: {
                        ZStack(alignment: .topTrailing) { // 使用alignment定位勾选标记
                            let correctedPhotoURL = school.logo?.replacingOccurrences(of: "//SchImg", with: "/SchImg") ?? ""
                            VStack {
                                URLImageView(url: correctedPhotoURL, placeholder: "NoProfilePic", width: 50, height: 50)
                                    .clipShape(Circle())
                                    .padding(.bottom, 4)
                                Text(school.schoolCode ?? "")
                                    .font(.headline)
                                    .foregroundColor(.black)
                            }
                            .frame(width: 100, height: 120)
                            .background(Color.gray.opacity(0.2))
                            .cornerRadius(10)

                            RoundedRectangle(cornerRadius: 10)
                                .stroke(viewModel.schoolCode == school.schoolCode ? Color.green : Color.clear, lineWidth: 2)
                                .frame(width: 100, height: 120)

                            if viewModel.schoolCode == school.schoolCode {
                                Image(systemName: "checkmark.circle.fill")
                                    .resizable()
                                    .frame(width: 20, height: 20)
                                    .foregroundColor(.green)
                                    .padding(8) // 用padding替代固定offset，适配容器
                            }
                        }
                    }
                    .padding(5)
                } else {
                    Text("\(item),")
                }
            }
        } else {
            Text("No array found in UserDefaults.")
        }
    }
    .padding(.horizontal)
}

关键修改说明 #

• 有序去重：用filter结合Set实现有序去重，确保uniqueItems的顺序和原retrievedArray一致，避免视图顺序随机变化。
• 勾选标记定位：将ZStack的alignment设为.topTrailing，用padding替代固定offset，让勾选标记始终显示在按钮的右上角，不会因视图尺寸变化偏移。

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