SwiftUI中如何移除ForEach视图内元素间的分隔线

问题根源 #

1. 错误使用ZStack作为渐变视图容器：ZStack是层叠容器，会让所有渐变视图重叠而非垂直排列，导致渲染时出现异常间隙/分隔线。
2. 渐变视图未设置明确高度：未指定frame导致视图高度未占满父容器，产生视觉间隙。
3. 无效的.listRowInsets(.none)修饰符：该修饰符仅对ListView的行元素生效，此处使用无意义。

修复方案及代码修改 #

将容器替换为VStack，给每个渐变设置完整高度，移除无效修饰符，同时优化循环次数提升性能：

import SwiftUI

struct ColorsView: View {
    
    @State private var timer: Timer?
    @State private var offset: CGFloat = 0
    @State private var closeCount = 0
    
    let colors: [Color] = [
        .red,
        .blue,
        .yellow,
        .brown,
        .green,
        .orange,
        .purple
    ]
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            GeometryReader { geometry in
                autoScroller(geometry: geometry)
            }
        }
        .ignoresSafeArea()
    }
}

// MARK: Color change extension
extension ColorsView {
    
    func autoScroller(geometry: GeometryProxy) -> some View {
        // 替换ZStack为VStack，实现垂直排列
        VStack(spacing: 0) { // 设置spacing为0，确保无间隙
            // 优化循环次数：使用两倍颜色数量即可实现无缝滚动
            ForEach(0..<colors.count*2, id: \.self) { index in
                LinearGradient(
                    gradient: Gradient(colors: [
                        colors[index % colors.count], 
                        colors[(index + 1) % colors.count]
                    ]), 
                    startPoint: .top, 
                    endPoint: .bottom
                )
                .frame(height: geometry.size.height) // 设置每个渐变占满父视图高度
            }
        }
        .offset(y: offset) // 统一给VStack添加偏移，无需单独设置子视图
        .animation(.linear(duration: 3), value: offset)
        .onAppear {
            startColorChange(geometry: geometry)
        }
        .onDisappear {
            stopColorChange()
        }
    }
    
    func startColorChange(geometry: GeometryProxy) {
        timer = Timer.scheduledTimer(withTimeInterval: 2, repeats: true) { _ in
            withAnimation {
                offset -= geometry.size.height
                // 滚动过一组颜色高度时重置，实现无缝循环
                if offset <= -geometry.size.height * CGFloat(colors.count) {
                    offset = 0
                }
            }
        }
    }
    
    func stopColorChange() {
        timer?.invalidate()
        timer = nil
    }
}

struct ColorsView_Previews: PreviewProvider {
    static var previews: some View {
        ColorsView()
    }
}

额外优化说明 #

• VStack(spacing: 0)：确保垂直排列的视图之间没有默认间距。
• 循环次数改为colors.count*2：既实现无缝滚动，又避免不必要的大量视图渲染，提升性能。
• 统一设置VStack偏移：相比给每个子视图单独设置offset，整体偏移逻辑更简洁高效。

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