Make writing a habit together! This is the 14th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.
Preface:
When writing this chapter, I found that it was still about the “advanced usage” of this content, but after thinking about it, I decided not to write so in-depth for fear of expanding the content too much, and it would be difficult to digest, so I just listed the simple use method.
In the following chapters, I will gradually go further. After I finish explaining how to use the basic functions of SwiftUI, I will also consider some practical project cases so that SwiftUI fans can really write projects.
Work hard and play hard.
In this chapter, you will learn to use modal pop-ups to complete page jumps and custom returns.
In the previous chapter, we learned how to jump to a page using the NavigationView navigation bar, which is a common way to jump to a page.
Another way to open a new page, which is common on the iPhone, is to pop up a new page from the bottom up.
As you can see, this page is not exactly “entering” a new page, it allows users to swipe down to close the page, which greatly enhances the user experience.
This gives the user the impression that they are not “interrupting” or “interfering” with what they are doing, and that they are doing what they want to do.
This chapter will be divided into three parts.
1. Page jump based on modal pop-ups;
2. Custom return of modal pop-ups;
3. Alerts warning popup;
All right, with that said, let’s get started.
Part one: Page jump based on modal popup
First, let’s create a new project called SwiftUIModalView.
Let’s try a simple modal popover jump.
For example, we create a button on the first page that opens a modal popover page when we click it.
See the previous article on how to create a button.
The code to create the button is as follows:
// Button(action: {// click the Button to open the modal popup}) {// Button style Text(" open the modal popup ").font(.system(size: 14)).frame(minWidth: 0, maxWidth: .infinity) .padding() .foregroundColor(.white) .background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255)) .cornerRadius(5) .padding(.horizontal, 20) }Copy the code
Then, we need to create a new page so that we can click the button from the first page and open the second page in modal popup mode.
Here, we create a page called DetailView based on the previous chapter.
In the DetailView, let’s put a simple text explanation.
Struct DetailView: View {var body: some View {Text(" this is a new page ")}}Copy the code
Next, we implement the jump method using modal popovers.
. Sheet (isPresented: $showDetailView) {Copy the codeThe modal popover method is simple, using the. Sheet modifier.
IsPresented is a modal popover trigger condition that requires binding an operation with $. We typically define a Boolean value with an initial state of false.
@State var showDetailView = false
Copy the codeWhen we click the button on the first page, the button action changes the Boolean value to true, and the.sheet opens the modal popover at the same time.
Here we define a parameter called showDetailView, which is a bool and has an initial value of false.
ShowDetailView switches state when we click the button.
self.showDetailView.toggle()
Copy the code
Let’s hit Preview on the simulator to see what it looks like.
After clicking the button, we can see that the system opens the DetailView modal popover page we defined.
The complete code is as follows:
Import SwiftUI struct ContentView: View {@state var showDetailView = false var body: some View { {/ /. Click on the button to jump to open the modal pop-up "self showDetailView. Toggle ()}) {/ / button style Text (" open the modal popup window"). The font (. System (size: 14)). The frame (minWidth: 0, maxWidth: .infinity) .padding() .foregroundColor(.white) .background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255)) .cornerRadius(5) .padding(.horizontal, 20) } .sheet(isPresented: $showDetailView) { DetailView() } } } struct ContentView_Previews: PreviewProvider { static var previews: Struct DetailView: View {var body: some View {Text(" this is a new page ")}Copy the code
Part two: Custom return of modal popovers
In the DetailView page, you can close the page by dragging the page down.
We can also try adding a close button to the DetailView that closes the page when we click the close button.
Remember the NavigationView navigation bar we studied in the last chapter? We can add a navigation to the DetailView content, and then a button action to the right of the navigation.
Struct DetailView: View {var body: NavigationBarItems (trailing: Button(action: trailing) navigationBarItems(trailing: Button(action: trailing) {// click the button to close the popover}) {Image(systemName: "chevron.down.circles.fill ").foregroundcolor (.gray)})}}}Copy the code
Ok, we see that a new button has been created in the upper right corner of the DetailView navigation bar.
So what we’re going to do is we’re going to click the button and close the popover.
There are two ways we can do this.
Method 1:
As with the NavigationView navigation bar in the previous chapter, create an environment variable:
@Environment(\.presentationMode) var presentationMode
Copy the codeThen when we click the button, we call its function method.
self.presentationMode.wrappedValue.dismiss()
Copy the codeBy clicking Preview on the simulator, we see that we have implemented the click action to close the current modal popover page.
The complete code is as follows:
Struct DetailView: View {// Define the Environment variable @environment (\.PresentationMode) var presentationMode var body: NavigationBarItems (trailing: Button(action: trailing) navigationBarItems(trailing: Button(action: trailing) {/ /. Click on the button to close the pop-up "self presentationMode. WrappedValue. Dismiss ()}) {Image (systemName: "chevron.down.circle.fill") .foregroundColor(.gray) } ) } } }Copy the code
Method 2:
The previous section also learned about the use of State and Binding.
We can bind the showDetailView Boolean created on the first page with @binding on the DetailView page.
// Binding parameter @binding var showDetailView: BoolCopy the codeThen on the DetailView page, the value of showDetailView is switched when the button is clicked.
self.showDetailView.toggle()
Copy the codeFinally in the main page. Sheet jump to the target page binding parameters back.
.sheet(isPresented: $showDetailView) {
DetailView(showDetailView: $showDetailView)
}
Copy the codeIn this way, we can also implement the page back operation.
The complete code of DetailView page is as follows:
Struct DetailView: View {Binding parameter @binding var showDetailView: Bool var body: NavigationBarItems (trailing: Button(action: trailing) navigationBarItems(trailing: Button(action: trailing) {/ /. Click on the button to close the pop-up "self showDetailView. Toggle ()}) {Image (systemName: "chevron.down.circle.fill") .foregroundColor(.gray) } ) } } }Copy the code
So what’s the difference between the two approaches?
The first method is simply to “undo” the original action.
The second way to bind is to pass parameter values back to the first page.
The two methods have their own advantages. The advantage of the second method is that if the second page needs to return with parameter values, we can return the DetailView value to the first page through binding.
Part 3: Alerts warning popup
In the modal popover, there is another type called Alerts warning popover, which is also a kind of modal popover.
We also often see it in the App. When we decide to pay, or trigger a risky operation, the system will open the Alerts warning popup.
Alerts Warning popup A secondary confirmation popup, often used for system risk notification and whether to execute immediately.
Warning pop-ups are created in the same way as normal modal pop-ups, but with different parameters.
.alert(isPresented: $showAlert) {//Alerts structure}Copy the codeAgain, using the isPresented trigger, we define the state of a variable showAlert. The initial state is false.
@State var showAlert = false
Copy the codeInstead of creating a standard modal popover, the content inside.alert is the Alerts structure, which is the standard warning popover.
We use the Alert structure to create the warning popover.
Alert(title: Text(" this is popup title "), message: Text(" this is popup content "), primaryButton:.default(" ok "), secondaryButton: Cancel (Text (" cancel ")))Copy the codeNow that you have a basic understanding of the warning popover, let’s try it out.
Let’s change the text of the DetailView page to “Open the warning popup” and change it to a button.
So that we can click the text button to realize the effect of opening the warning popup.
Button(action: {// click the Button to open the warning popup}) {Text(" open the warning popup ")}Copy the code
Then we write the method of warning popover into the DetailView page, which is similar to the method of. Sheet in the home page.
First define a variable showAlert, the initial value is false, when the button is clicked, showAlert state switch.
Outside the Text button (note the location), create an alert popover using.alert and fill the alert structure with code in the alert popover content.
This completes the creation of the Alerts alert pop-up.
DetailView complete code is as follows:
Struct DetailView: View {// Binding parameter @binding var showDetailView: Bool @state var showAlert = false var body: Some View {NavigationView {// Main content Button(action: {// Click the button to open the warning popup self.showalert.toggle ()}) {Text(" Open the warning popup ")}. Alert (isPresented: $showAlert) {//Alerts structure Alert(title: Text(" this is popup title "), message: Text(" this is popup content "), primaryButton: .default(Text(" confirm ")), secondaryButton:.cancel(Text(" cancel "))}. NavigationBarItems (trailing: Button(action: trailing) {/ /. Click on the button to close the pop-up "self showDetailView. Toggle ()}) {Image (systemName: "chevron.down.circle.fill") .foregroundColor(.gray) } ) } } }Copy the code
Come and try it!
If this column has been helpful to you, like it, comment on it, follow it