Make writing a habit together! This is the 13th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.
Foreword: the computer dies without reason 2 times, possibly because do UI at the same time, write code at the same time, write an article at the same time, but hard computer. But fortunately, the article is saved in real time, every time I open the original is still in, can frighten me to death. Adhere to the code word, adhere to the update, today is the day more 13 days, come on!
Write for one person.
In this chapter, you’ll learn how to use NavigationView to build a basic navigation bar and navigate to pages based on the navigation bar.
If you happen to use UIkit, you should have tried building page navigation using storyboards or UINavigationController.
In SwiftUI, we use NavigationView, which is basically the same as List in the previous chapter.
This chapter will be divided into three parts.
1. Build a simple navigation bar;
2. Page hopping based on navigation bar;
3. Return to the custom navigation bar;
Part one: Build a simple navigation bar
Let’s try adding a NavigationView to the original List to see what the navigation bar looks like.
The UI draft is as follows:
First, let’s create a new project called SwiftUINavigationView.
Then, let’s take the code from the previous chapter as an example.
The code is as follows:
Import SwiftUI struct ContentView: View {var Messages = [Message(name: "this is wechat ", image: "Weixin "), Message(name:" this is weibo", image: "weibo"), Message(name: "this is QQ", image:" QQ"), Message(name: "this is phone ", image: "Phone "), Message(name:" email ", image: "email ")] var body: Some View {// List(Messages) {Message in HStack {Image(message.image).resizable().frame(width: 40, height: 40) 40) .cornerRadius(5) Text(Message.name) } } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } struct Message: Identifiable { var id = UUID() var name: String var image: String }Copy the code
NavigationView is built the same way as the List method, wrapping the content we need inside the NavigationView.
NavigationView{ }
Copy the codeNotice here that you need to wrap the entire List.
Once the package is complete, we can see that the navigation bar is set aside at the top of the List.
NavigationView{// List(Messages) {Message in HStack {Image(message.image).resizable().frame(width: 40, height: 40) .cornerRadius(5) Text(Message.name) } } }Copy the code
Let’s try adding a title. Here we use the modifier:
.NavigationBarTitle (" I'm the title ")Copy the codeQualifiers need to be added to the outermost content layer, not the NavigationView layer.
This gives us a list with a headline.
NavigationView {// List(Messages) {Message in HStack {Image(message.image).resizable().frame(width: > < div style = "box-sizing: border-box! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;Copy the code
Isn’t that easy?
SwiftUI simplifies a lot of things so much that the way we use different controls is pretty much the same.
Part two: Page hopping based on navigation bar
So let’s step it up a little bit.
We try to jump from one page to the next and still get back.
The UI draft is as follows:
We finish the second page first, then click on the corresponding list from the first page to go to the second page.
We create a new page at the end of the ContentView page and call it DetailView.
The code is as follows:
Struct DetailView: View {var message: message var body: some View { VStack { Image(message.image) .resizable() .frame(width: 80, height: 80) Text(message.name) .font(.system(.title, design: .rounded)) .fontWeight(.black) Spacer() } } }Copy the codeWe reference the Message array data in the DetailView and replace the Image and Text Text with the array parameters.
In this way, we can click on a list on the first page, and then bring the corresponding image and text to the second page, which is called the upload.
Then go back to the first page.
We need to click on the List List and jump to the second page.
You need to use a new parameter called NavigationLink.
NavigationLink(destination: DetailView()) {Copy the codeDestination indicates the page we want to jump to, and the page we need to jump to is DetailView.
We need to click on a line in the List to jump to the second page, so NavigationLink needs to be inside the List, not wrapped around the whole List.
If the NavigationLink is wrapped around the List, then you’re going to click on the entire List, and you’re going to click on a single line of the List.
NavigationView {
// 列表
List(Messages) { Message in
NavigationLink(destination: DetailView(message: Message)) {
HStack {
Image(Message.image)
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(5)
Text(Message.name)
}
}
}.navigationBarTitle("我是标题")
}
Copy the code
We can see that the jump target is the DetailView, and we pass the parameters of the Message structure to the Message variable of the DetailView page.
This enables the parameters in our Message structure to be passed to Message, which Message we click on, and which parameter is passed to the Message of the DetailView page.
Click Preview on the simulator to run the simulator and try clicking one line of List to experience the effect of clicking the jump page and then clicking back to the home page.
Popularize a knowledge point.
In common apps, the text in the top navigation bar is centered. How is this achieved?
It’s easy. Ios defaults to.automatic, which is:
NavigationBarTitle (" I'm the title ", displayMode:.automatic)Copy the codeWe can center the text title by adding a. Inline parameter control to the. NavigationBarTitle (” I’m the title “).
NavigationBarTitle (" I'm the title ", displayMode:.inline)Copy the code
Ok, so we have completed the navigation bar based page jump mode!
Part 3: Navigation bar custom return
Next, let’s look at the DetailView page and see that the “return” operation doesn’t look so pretty.
Most of the time, our “back” action might be an icon button or a “text” button.
Is there any way we can spruce up the return to home page operation?
Let’s analyze this.
We just need to hide the system’s own return operation, and then “write” a return operation.
Here we use the argument to hide the navigation back button:
.navigationBarBackButtonHidden(true)
Copy the code
Next, we’ll write a return button of our own. In this case, we’ll need another argument:
.navigationBaritems (leading: Button(action: {// click)){// "chevron.left") .foregroundColor(.gray) })Copy the codeLet’s try using an icon button as a return button.
The picture that comes with the system is used here, and the filling color is gray.
Run to see, we can click on the home list data to enter the details page.
However, we hit the back operation and nothing happened.
This is because we haven’t implemented the return method yet.
SwiftUI provides a built-in environment value (.PresentationMode) that we can use to return to the previous view.
@Environment(\.presentationMode) var mode
Copy the codeThe returned operation is then implemented by calling the dismiss() function of the environment value when the button is clicked back.
self.mode.wrappedValue.dismiss()
Copy the codeThe complete code of DetailView page is as follows:
Struct DetailView: View {// DetailView @environment (\.PresentationMode) var mode var message: message var body: some View { VStack { Image(message.image) .resizable() .frame(width: 80, height: 80) Text(message.name) .font(.system(.title, design: .rounded)) .fontWeight(.black) Spacer() } .navigationBarBackButtonHidden(true) .navigationBarItems(leading: Button (action: {/ /. Click on the Button after operation the self mode. WrappedValue. Dismiss ()}) {/ / Button and its style Image (systemName: "chevron.left") .foregroundColor(.gray) }) } }Copy the code
Running the code, we found that the implementation of a custom button return operation!
Well, that’s all for today.
If this column has been helpful to you, like it, comment on it, follow it