SwiftUI中如何限制数组显示条目？仅展示前20项

云上老周

2026-8-4

实现SwiftUI仅展示数组前20项的方法

有两种简洁的方式可以实现需求，具体如下：

方法一：切片数组并遍历元素（推荐）

直接对原数组取前20个元素，同时获取元素和对应索引，这种方式更安全，能避免下标越界风险：

ForEach(Array(backgroundImages.prefix(20).enumerated()), id: \.offset) { index, imageName in
    ZStack {
        Image(imageName)
            .resizable()
            .frame(width: 100, height: 100)
            .cornerRadius(5)
        
        RoundedRectangle(cornerRadius: 5)
            .strokeBorder(LinearGradient(colors: [Color.white.opacity(0.3), Color.white.opacity(0), Color.white.opacity(0.3)], startPoint: .topLeading, endPoint: .bottomTrailing), lineWidth: 1)
            .frame(width: 100, height: 100)
            .onTapGesture { self.feedback() }
    }
    .onTapGesture { selectedBackground = index }
}

prefix(20)：截取数组的前20个元素
enumerated()：同时获取元素的索引和值，方便后续设置selectedBackground

方法二：限制索引遍历范围

如果希望保留原有的索引遍历逻辑，可以直接限定索引的范围，同时处理数组元素不足20个的情况：

ForEach(0..<min(backgroundImages.count, 20), id: \.self) { i in
    ZStack {
        Image(backgroundImages[i])
            .resizable()
            .frame(width: 100, height: 100)
            .cornerRadius(5)
        
        RoundedRectangle(cornerRadius: 5)
            .strokeBorder(LinearGradient(colors: [Color.white.opacity(0.3), Color.white.opacity(0), Color.white.opacity(0.3)], startPoint: .topLeading, endPoint: .bottomTrailing), lineWidth: 1)
            .frame(width: 100, height: 100)
            .onTapGesture { self.feedback() }
    }
    .onTapGesture { selectedBackground = i }
}