SwiftUI：如何在LazyVStack中保留固定Header并为Section添加统一样式

要解决Section样式拆分的问题，核心是让头部和内容的样式视觉上统一，同时不破坏LazyVStack的头部固定特性，下面提供两种实用方案：

方案一：自定义SectionStyle（推荐） #

通过实现SectionStyle协议，我们可以完全控制Section的布局逻辑，把头部和内容整合到同一个视觉容器中，同时保留头部的固定行为。

代码实现 #

首先定义自定义的Section样式：

struct UnifiedSectionStyle: SectionStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(spacing: 0) {
            // 固定头部：设置背景避免滚动时内容穿透，同时保留padding
            configuration.header
                .background(Color.white)
                .padding(.horizontal)
                .padding(.top, 16)
            
            // 内容区域：通过padding偏移让边框覆盖头部底部，形成整体感
            configuration.content
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 12)
                        .stroke(.blue, lineWidth: 1)
                        .padding(.top, -20) // 向上偏移，让边框顶到头部底部
                )
        }
    }
}

然后在ContentView中使用这个样式：

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack(pinnedViews: [.sectionHeaders]) {
                Section {
                    // 模拟长列表，验证固定头部效果
                    ForEach(0..<30) { index in
                        Text("列表项 \(index)")
                            .padding(.vertical, 12)
                    }
                } header: {
                    Text("固定分区头部")
                        .font(.headline)
                        .foregroundColor(.blue)
                }
                .sectionStyle(UnifiedSectionStyle())
            }
        }
    }
}

原理说明 #

自定义SectionStyle将头部和内容放在无间距的VStack中，通过调整内容区域的overlay偏移，让边框向上延伸覆盖头部底部，视觉上形成一个完整的卡片样式，同时头部依然会被LazyVStack固定在顶部。

方案二：拆分样式+视觉衔接 #

如果不想自定义SectionStyle，可以分别给头部和内容设置互补的样式，让它们看起来是一个整体：

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack(pinnedViews: [.sectionHeaders]) {
                Section {
                    VStack {
                        ForEach(0..<30) { index in
                            Text("列表项 \(index)")
                                .padding(.vertical, 12)
                        }
                    }
                    .padding()
                    .overlay(
                        // 内容区域的边框裁剪掉顶部，只保留左右下
                        RoundedRectangle(cornerRadius: 12)
                            .stroke(.blue, lineWidth: 1)
                            .clipShape(RoundedRectangle(cornerRadius: 12).path(in: CGRect(x: 0, y: 1, width: UIScreen.main.bounds.width - 32, height: .infinity)))
                    )
                } header: {
                    Text("固定分区头部")
                        .font(.headline)
                        .padding()
                        .background(Color.white)
                        .overlay(
                            // 头部添加底部边框，和内容区域的边框对齐
                            Rectangle()
                                .frame(height: 1)
                                .foregroundColor(.blue)
                                .alignmentGuide(.bottom) { $0[.bottom] }
                        )
                }
            }
        }
    }
}

原理说明 #

头部只添加底部边框，内容区域的边框裁剪掉顶部，两者的边框刚好衔接，滚动时头部固定，视觉上依然是一个完整的样式单元。

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