NavigationView jump and return related

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!

Guess you like

Origin blog.csdn.net/survivorsfyh/article/details/132363891