SwiftUI设置页NavigationBar颜色异常及分组列表Divider缺失问题

问题1：导航栏颜色匹配与滚动内容覆盖处理 #

原因 #

使用.clipped()会切断List背景向导航栏区域的延伸，导致导航栏恢复默认白色；不使用该修饰符时，List背景延伸至导航栏下方，滚动时内容会覆盖导航栏。

解决方案 #

1. 移除.clipped()修饰符，保留List背景的自然延伸。
2. 通过toolbarBackground设置导航栏背景色为系统分组列表的灰色，与Section背景保持一致。
3. 显式设置导航栏背景可见，避免透明状态。

问题2：Section内分组项无默认分割线 #

原因 #

自定义的SettingsItem直接使用HStack作为Section子视图，未采用List默认的行容器（如NavigationLink、Button），系统不会自动添加分割线。

解决方案 #

将SettingsItem的内容包裹在NavigationLink中（无需实际跳转时，设置空的destination即可），让系统识别为标准列表行，自动添加分割线。

修改后的完整代码 #

Settings视图

struct Settings: View {
    var body: some View {
        NavigationView {
            List {
                Section(header:
                            Text("SUBSCRIPTIONS")
                    .foregroundColor(.black)) {
                        SettingsItem(
                            title: "subscriptionDetails().title",
                            content: "subscriptionDetails().level",
                            contentColor: .blue,
                            action: { print("Action") })
                    }
                Section(header:
                            Text("ACCOUNT SETTINGS")
                    .foregroundColor(.black)) {
                        SettingsItem(title: "Email", action: { print("Action")})
                        SettingsItem(title: "Gender", action: { print("Action") })
                        SettingsItem(title: "Phone Number", action:  { print("Action") })
                }
                
                Section(header:
                            Text("PREFERENCES")
                    .foregroundColor(.black)) {
                        SettingsItem(title: "Notifications", action: { print("Action") })
                    }
                
                Section(header:
                            Text("SECURITY")
                    .foregroundColor(.black)) {
                        SettingsItem(title: "Password", action: { print("Action") })
                    }
                
                Section(header:  Text("ABOUT")
                    .foregroundColor(.black)) {
                        SettingsItem(title: "FAQ", action: { print("Action") })
                        SettingsItem(title: "About", action: { print("Action") })
                        SettingsItem(title: "Contact", action: { print("Action") })
                    }
                Section(header:
                    HStack {
                        Spacer()
                        Text("Version 1.0.0")
                        Spacer()
                    }.foregroundColor(.black)) {
                      EmptyView()
                    }
            }
            .edgesIgnoringSafeArea(.bottom)
            .listStyle(.grouped)
            .navigationBarTitle("Settings", displayMode: .inline)
            .navigationBarBackButtonHidden(true)
            // 设置导航栏背景色与Section一致
            .toolbarBackground(Color(UIColor.systemGroupedBackground), for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbar(content: {
                ToolbarItem(placement: .navigationBarLeading) {
                    DoneButton(action: { print("Done") })
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                       print("Logout")
                    }, label: {
                        Text("Log Out")
                            .font(.callout).bold()
                            .foregroundColor(.red)
                    })
                }
            })
        }
    }
}

SettingsItem视图

struct SettingsItem: View {
    var title: String
    var content: String?
    var contentColor: Color?
    let action: () -> Void
    
    var body: some View {
        // 用NavigationLink包裹，触发系统默认分割线
        NavigationLink(destination: EmptyView()) {
            HStack {
                Text(title)
                    .font(.system(size: 18, weight: .regular))
                    .foregroundColor(.black)
                Spacer()
                if let content = content, let contentColor = contentColor {
                    Text(content).padding(.trailing, 10)
                        .foregroundColor(contentColor)
                }
                Image(systemName: "chevron.right")
                    .font(.system(size: 16, weight: .bold))
                    .foregroundColor(.gray)
            }
        }
        .onTapGesture(perform: action)
    }
}

补充说明 #

• 若DoneButton是自定义视图，确保其样式与整体设计统一即可。
• 若不需要NavigationLink的跳转样式，也可改用Button包裹HStack，同样能触发系统分割线。

内容的提问来源于stack exchange，提问作者Jake Smith