NavigationView in SwiftUI corresponds to UINavigationController in object-c UIKit.
Its navigation bar contains title and navigation buttons (left and right navigation buttons).
1. Title title
The system default is the large title option, which will have a single row on the left. In a view with scrolling, it will return to the center of the navigation bar along with the scrolling track; if you initially want the title to be in the horizontal center of the navigation
bar , then set the property of navigationBarTitleDisplayMode to inline.
displayMode is TitleDisplayMode enumeration
1.automatic inherits the previous navigation mode
2.inline standard navigation style, arranged in one line
3.large default style, single line, large title on the left
NavigationView {
Text("")
.navigationTitle("标题") // title
.navigationBarTitleDisplayMode(.inline) // 标题布局模式
.foregroundColor(Color.blue) // 颜色
}
2. Navigation buttons
On the basis of initializing NavigationView, add the toolbar attribute, which contains ToolbarItem, create it and configure the required text or button style components and bind the corresponding click event; the process is similar to the UINavigationController custom item in oc
;
For details, please refer to the following code
NavigationView {
Text("")
.navigationTitle("YHDemo") // title
.navigationBarTitleDisplayMode(.inline) // 布局模式
.foregroundColor(Color.blue) // 颜色
.navigationBarBackButtonHidden(true) // 是否隐藏返回箭头
.toolbar { // 导航按钮配置
ToolbarItem(placement: .navigationBarLeading) {
// 返回按钮
Button(action: goback) {
// 按钮样式
Image(systemName: "chevron.left")
.foregroundColor(.gray)
}
}
ToolbarItem(placement: .navigationBarTrailing) {
NavigationLink(destination: ContentView()) {
Text("Edit")
}
}
}
}
3. Jump and return events
Switching jumps and returns between view layers are similar to push and pop in UINavigationController, but here you need to use a new component NavigationLink to combine with the existing ToolbarItem click event;
1. Jump to the next level
ToolbarItem(placement: .navigationBarTrailing) {
NavigationLink(destination: ContentView()) { // 跳转至 ContentView 视图
Text("Edit")
}
}
2. Return to the previous level.
First, to return to dismiss, presentationMode needs to be configured in advance.
@Environment(\.presentationMode) private var mode
Secondly, set dismiss in the corresponding method.
Finally, bind the method and event to each other.
ToolbarItem(placement: .navigationBarLeading) {
// 返回按钮
Button(action: goback) { // 绑定返回事件
// 按钮样式
Image(systemName: "chevron.left")
.foregroundColor(.gray)
}
}
...
private func goback() {
withAnimation {
self.mode.wrappedValue.dismiss()
}
}
full version
import SwiftUI
struct YHDemoView: View {
@Environment(\.presentationMode) private var mode
var body: some View {
NavigationView {
Text("")
.navigationTitle("YHDemo") // title
.navigationBarTitleDisplayMode(.inline) // 布局模式
.foregroundColor(Color.blue) // 颜色
.navigationBarBackButtonHidden(true) // 是否隐藏返回箭头
.toolbar { // 导航按钮配置
ToolbarItem(placement: .navigationBarLeading) {
// 返回按钮
Button(action: goback) {
// 按钮样式
Image(systemName: "chevron.left")
.foregroundColor(.gray)
}
}
ToolbarItem(placement: .navigationBarTrailing) {
NavigationLink(destination: ContentView()) {
Text("Edit")
}
}
}
}
}
private func goback() {
withAnimation {
self.mode.wrappedValue.dismiss()
}
}
}
struct YHDemoView_Previews: PreviewProvider {
static var previews: some View {
YHDemoView()
}
}
The above is all the content shared this time, I hope it can be helpful to everyone!