You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何隐藏SwiftUI中NavigationView下方的分隔线?

移除SwiftUI中NavigationView下方的分隔线(plain样式List场景)

设置.listStyle(.plain)后,NavigationView下方出现了多余的分隔线,由于需要手动为List设置内边距,尝试过用VStack嵌套List但无效,添加空Text可以消除分隔线但不想采用这种方式,以下是两种可行解决方案:

当前效果截图:
当前输出效果截图

方案1:iOS 16+ 原生API(推荐)

iOS 16及以上提供了专门的修饰符.navigationBarSeparator(.hidden),可直接隐藏NavigationBar与下方内容之间的分隔线,无需添加冗余视图。

只需在List的修饰符中新增这一行:

.navigationBarSeparator(.hidden)

方案2:兼容iOS 15及以下版本

将List的所有内容包裹在Section中,同时隐藏Section的所有分隔线:

List {
    Section {
        // 原Horizontal ScrollView内容
        // 原Vertical List内容
    }
    .listSectionSeparator(.hidden, edges: .all)
}

如果需要全局临时隐藏(谨慎使用,会影响所有UITableView),可通过UIKit外观设置:

.onAppear {
    UITableView.appearance().separatorStyle = .none
}
.onDisappear {
    UITableView.appearance().separatorStyle = .singleLine
}

修改后的完整代码(方案1)

import SwiftUI

struct ContentView: View {
    var apiHandler = APIHandler.shared
    
    @State var users = [User]()
    
    var body: some View {
        NavigationView {
            List {
                //Top Horizontal Layout
                ScrollView(.horizontal,showsIndicators: false) {
                    HStack {
                        ForEach(users, id: \.id) { user in
                            HorizontalUserList(user: user)
                        }
                    }
                }
                
                //Vertical Layout
                ForEach(users,id: \.id) { user in
                    VerticalUserList(user: user)
                        .listRowInsets(.init(top: 20, leading: 10, bottom: 0, trailing: 0))
                }
            }
            .listStyle(.plain)
            .listSectionSeparator(.hidden,edges: .all)
            .scrollContentBackground(.hidden)
            .navigationBarSeparator(.hidden) // 新增:隐藏导航栏下方分隔线
            .navigationTitle("Users")
        }
        .onAppear(perform: {
            apiHandler.getUsers {
                users = apiHandler.users
            }
        })
    }
}

struct VerticalUserList: View {
    var user : User
    
    @State var image = UIImage()
    
    var body: some View {
        HStack{
            Image(uiImage: image)
                .resizable()
                .cornerRadius(30)
                .aspectRatio(contentMode: .fit)
                .frame(width: 60,height: 60,alignment: .center)
                .onAppear(perform: {
                    guard let url = URL(string: user.avatar) else { return }
                    URLSession.shared.dataTask(with: url) { data, response, error in
                        guard let data = data else { return }
                        guard let image = UIImage(data: data) else { return }
                        DispatchQueue.main.async {
                            self.image = image
                        }
                    }.resume()
                })
            Text(user.first_name + " " + user.last_name)
                .font(.headline)
                .multilineTextAlignment(.leading)
        }
    }
}

struct HorizontalUserList: View {
    var user : User
    
    @State var image = UIImage()
    
    var body: some View {
        VStack{
            Image(uiImage: image)
                .resizable()
                .frame(width: 80,height: 80,alignment: .center)
                .cornerRadius(40)
                .aspectRatio(contentMode: .fit)
                .padding(10)
                .onAppear(perform: {
                    guard let url = URL(string: user.avatar) else { return }
                    URLSession.shared.dataTask(with: url) { data, response, error in
                        guard let data = data else { return }
                        guard let image = UIImage(data: data) else { return }
                        DispatchQueue.main.async {
                            self.image = image
                        }
                    }.resume()
                })
            Text(user.first_name + " " + user.last_name)
                .font(.headline)
                .multilineTextAlignment(.leading)
        }
    }
}

内容的提问来源于stack exchange,提问作者Karthi Rasu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.24 03:40:55