SwiftUI中如何循环实现前三排名的特殊位置布局

核心思路 #

1. 调整数据展示顺序：原数组按rank升序（1、2、3）排列，我们需要转换为第2名、第1名、第3名的展示顺序
2. 封装单个用户UI组件，根据rank自动适配布局差异（顶部间距、冠军专属图标）
3. 通过循环渲染组件，彻底消除重复代码

完整实现代码 #

struct TopSortingUIView: View {
    var topSortingList : [TopSorting] = TopSortingList.three
    
    // 构建符合展示要求的用户顺序：亚军、冠军、季军
    private var displayList: [TopSorting] {
        [
            topSortingList.first { $0.rank == 2 }!,
            topSortingList.first { $0.rank == 1 }!,
            topSortingList.first { $0.rank == 3 }!
        ]
    }
    
    var body: some View {
        HStack(spacing: 24) {
            // 循环渲染每个用户的UI组件
            ForEach(displayList, id: \.rank) { user in
                TopUserView(user: user)
            }
        }
    }
}

// 单个排名用户的独立UI组件
struct TopUserView: View {
    let user: TopSorting
    
    var body: some View {
        VStack(spacing: 8) {
            // 冠军用户显示专属图标
            if user.rank == 1 {
                Image("King")
                    .padding(.bottom, -8) // 缩小图标与头像的间距
            }
            
            Image(user.photoUrl)
                .resizable()
                .scaledToFill()
                .frame(width: 77, height: 77)
                .clipShape(Circle())
                .shadow(radius: 8)
                .shadow(color: Color(red: 0.973, green: 0.976, blue: 0.98), radius: 4.15)
                // 非冠军用户添加顶部内边距，实现下移效果
                .padding(.top, user.rank != 1 ? 75 : 0)
            
            Text(user.userName)
                .font(.system(size: 12))
                .foregroundColor(.secondary)
            
            Text(user.data)
                .bold()
                .font(.system(size: 12))
                .foregroundColor(.black)
        }
    }
}

// 原有数据模型保持不变
struct TopSorting {
    let rank : Int
    let photoUrl: String
    let userName: String
    let name: String
    let data : String
}

struct TopSortingList {
    static let three = [
        TopSorting(rank: 1, photoUrl: "mangaa", userName: "user1", name: "us1", data: "2824Ap"),
        TopSorting(rank: 2, photoUrl: "mangaa", userName: "user2", name: "us2", data: "2000Ap"),
        TopSorting(rank: 3, photoUrl: "mangaa", userName: "user3", name: "us3", data: "600Ap")
     ]
}

关键细节说明 #

• 数据顺序控制：通过displayList计算属性，从原数组中精准提取对应rank的用户，确保循环渲染顺序完全符合设计要求
• 布局差异适配：在TopUserView中根据rank判断布局：
  • 冠军用户显示顶部King图标，且取消顶部内边距保持高位
  • 亚军、季军用户通过顶部内边距下移，形成视觉层级差
• 代码复用：用ForEach循环替代硬编码的三个VStack，后续修改布局只需调整单个组件，维护成本更低

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