如何隐藏SwiftUI中NavigationView下方的分隔线?
设置.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
相关产品推荐
相关产品推荐

