如何在SwiftUI List的内容上方叠加视图？

可以实现这个需求，核心是将List的所有内容包裹在一个容器视图（比如VStack）中，再为该容器添加叠加层，这样叠加视图就会跟随列表内容一起滚动。

实现代码 #

struct Xshape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        path.move(to: rect.origin)
        path.addLine(to: CGPoint(x: rect.origin.x + rect.width, y: rect.origin.y + rect.height))
        
        path.move(to: CGPoint(x: rect.origin.x, y: rect.origin.y + rect.height))
        path.addLine(to: CGPoint(x: rect.origin.x + rect.width, y: rect.origin.y))

        return path
    }
}

struct OverlayList: View {
    var body: some View {
        List {
            VStack {
                ForEach(1..<50) { index in
                    Text("Item \(index)")
                }
            }
            .overlay {
                Xshape()
                    .stroke(.red, lineWidth: 3)
            }
        }
    }
}

原理说明 #

• 如果直接给List添加overlay，叠加视图会固定在List的可视区域顶部，不会跟随内容滚动。
• 将所有列表项包裹在VStack后再添加overlay，叠加层会成为滚动内容的一部分，当列表滚动时，叉号会和列表项同步移动，隐藏部分会随下方内容进入视野而显示，效果和你在ScrollView+VStack中的实现一致。

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