SwiftUI has no way to remove the bottom border line at the moment.
In the past, developers can use the UIKit to work around it. See stackoverflow 1 and stackoverflow 2.
Following sample code works if we use the old navigation view and title.
import SwiftUI
struct TestView: View {
init(){
let appearance = UINavigationBarAppearance()
appearance.shadowColor = .clear
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
}
var body: some View {
NavigationView{
ScrollView{
ForEach(0 ..< 20){ num in
Text("Num - \(num)")
.padding()
}
}
.navigationTitle("Learn")
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestView()
}
}
However, as soon as we begin to use toolbar related modifiers, the trick will no longer work. I guess it is because the old navigation view uses UIKit behind the scene but toolbar does not.
import SwiftUI
struct ToolbarBorderTest: View {
init(){
let appearance = UINavigationBarAppearance()
appearance.shadowColor = .clear
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
}
var body: some View {
NavigationView{
ScrollView{
ForEach(0 ..< 20){ num in
Text("Num - \(num)")
.padding()
}
}
.toolbar {
ToolbarItem(placement: .principal) {
Text("Toolbar title (Inline)")
.foregroundColor(.blue)
.font(.headline)
}
}
.toolbarTitleDisplayMode(.inline)
.toolbarBackground(Color.white, for: .navigationBar)
.toolbarColorScheme(.light, for: .navigationBar)
}
}
}
#Preview {
ToolbarBorderTest()
}
Is this something that SwiftUI will support in the future?