NavigationStack中粘性头部列表分隔线隐藏问题求助

问题说明 #

向上滚动List时，Section粘性头部下方（RootView上方）的分隔线无法通过listRowSeparator(.hidden)移除，尝试多个列表修饰符均无效。

原代码 #

import SwiftUI

struct CalendarView: View {
    
    let dayLetters = ["S", "M", "T", "W", "T", "F", "S"]
    
    var body: some View {
        NavigationStack {
            List {
                Section {
                    RootView()
                } header: {
                    HStack {
                        ForEach(0..<dayLetters.count, id: \.self) { index in
                            Text(dayLetters[index])
                                .frame(maxWidth: .infinity)
                                .foregroundColor(.white)
                        }
                    }
                }
                .listRowInsets(EdgeInsets())
                .listRowSeparator(.hidden)
            }
            .navigationTitle("Calendar")
            .listStyle(.plain)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("Today") {
                        
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Label("Transform Calendar", systemImage: "ellipsis")
                        .foregroundColor(.accentColor)
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button {
                        
                    } label: {
                        Label("Add", systemImage: "plus")
                    }
                }
            }
        }
    }
}

解决方案 #

方案1：使用listSectionSeparator精准隐藏分隔线 #

给List添加listSectionSeparator(.hidden, edges: .top)修饰符，直接控制Section头部与内容之间的分隔线：

List {
    // 原有Section代码保持不变
}
.navigationTitle("Calendar")
.listStyle(.plain)
.listSectionSeparator(.hidden, edges: .top) // 新增该行
.toolbar {
    // 原有Toolbar代码保持不变
}

方案2：自定义LazyVStack粘性头部（无默认分隔线） #

如果方案1不生效，改用LazyVStack实现粘性头部，完全自定义布局避免默认分隔线：

struct CalendarView: View {
    
    let dayLetters = ["S", "M", "T", "W", "T", "F", "S"]
    
    var body: some View {
        NavigationStack {
            ScrollView {
                LazyVStack(pinnedViews: [.sectionHeaders]) {
                    Section {
                        RootView()
                    } header: {
                        HStack {
                            ForEach(0..<dayLetters.count, id: \.self) { index in
                                Text(dayLetters[index])
                                    .frame(maxWidth: .infinity)
                                    .foregroundColor(.white)
                            }
                        }
                        .background(Color(UIColor.systemBackground)) // 防止内容滚动穿透头部
                    }
                }
            }
            .navigationTitle("Calendar")
            .toolbar {
                // 原有Toolbar代码保持不变
            }
        }
    }
}

方案说明 #

• 方案1适合希望保留List原有交互逻辑的场景，通过官方修饰符快速解决分隔线问题。
• 方案2适合需要高度自定义头部样式和布局的场景，彻底摆脱List默认的分隔线限制。

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