Si të punoni me FullScreenCover në SwiftUI
Modalet janë pamje që shfaqen si mbivendosje ose dritare kërcyese mbi një pamje aktuale. Në SwiftUI, ne kryesisht përdorim një modifikues "fletë" për modalet, i cili praktikisht ofron funksionalitetin e përgjithshëm që i nevojitet zhvilluesit.
Por për modalet që mbulojnë të gjithë ekranin, ekziston një modifikues i ndërtuar për të i quajtur fullScreenCover, i disponueshëm në iOS14 dhe më lart.
Në këtë tutorial, ne do të krijojmë një aplikacion të thjeshtë që do të hapë një pamje modale në ekran të plotë kur shtypet një buton. Pamja e re pranon tekstin që shfaqet gjithashtu në pamjen tonë kryesore. UI duket si ai në figurën 2 dhe figurën 3 më poshtë.
Pra, le të fillojmë dhe të krijojmë një projekt "të ri" SwiftUI.
Së pari, le të konfigurojmë pamjen parësore. Ndryshoni ContentView si kjo:
struct ContentView: View {
@State private var mainText: String = ""
var body: some View {
ZStack {
ScrollView {
Text(mainText)
.padding()
} // ScrollView
} // ZStack
} // body
} // ContentView
Pra, pamja kryesore do të mbajë një "Text" të lëvizshëm të shkruar nga modal.
Gjëja tjetër që na nevojitet këtu është një "buton veprimi lundrues" që do të bëjë që modaliteti i ekranit të plotë të shfaqet kur preket. Shkruani këtë kod jashtë ContentView:
struct NewNoteButton: View {
var action: () -> Void
var body: some View {
Button(action: action) {
Image(systemName: "square.and.pencil")
.resizable()
.scaledToFill()
.frame(width: 50, height: 50)
.padding(30)
}
.background(.blue)
.foregroundColor(.white)
.cornerRadius(.infinity)
.padding()
} // body
} // newNoteButton
Pastaj vendosni butonin e sapokrijuar në ContentView, brenda ZStack, pak poshtë ScrollView si kjo:
struct ContentView: View {
@State private var mainText: String = ""
var body: some View {
ZStack {
ScrollView {
Text(mainText)
.padding()
} // ScrollView
NewNoteButton {}
} // ZStack
} // body
} // ContentView
Duke parë kanavacën, do të vini re se butoni ndodhet në qendër, i cili nuk duket si ai i paraqitur në figurën 2. Ne mund ta rregullojmë shpejt këtë duke modifikuar shtrirjen e ZStack si kjo:
ZStack(alignment: .bottom)
Tani duket e njëjtë me atë në dizajn.
Duke përdorur FullScreenCover
Modifikuesi fullScreenCover funksionon njësoj si fleta. Kërkon një variabël gjendjeje ku është e lidhur në mënyrë që të mund të kontrolloni nëse paraqitet apo jo. Shtoni këtë variabël brenda ContentView:
@State private var isPresented: Bool = false
Pastaj bashkëngjitni modifikuesin në pamje. Vendoseni modifikuesin fullScreenCover në ZStack of ContentView si kjo:
.fullScreenCover(isPresented: $isPresented) {}
Tani që modifikuesi është gati, është koha për të krijuar pamjen modale të jashtme të ekranit të plotë. Shkruani këtë kod jashtë ContentView:
struct FullScreenModalView: View {
@Binding var mainText: String
var body: some View {
VStack {
TextEditor(text: $mainText)
.padding(.horizontal)
} // VStack
} // body
} // FullScreenModalView
Pra, pamja e mësipërme ka një "TextEditor" ku ne do ta "lidhim" vargun e tij me ContentView.
Vendosni pamjen e re si përmbajtje të fullScreenCover si kjo:
.fullScreenCover(isPresented: $isPresented) {
FullScreenModalView(mainText: $mainText)
}
Gjëja që mbetet për të bërë është të ndryshoni gjendjen e "IsPresented" për të shfaqur modalitetin në ekran të plotë. Vendoseni këtë veprim në NewNoteButton si kjo:
NewNoteButton {
isPresented.toggle()
}
Këtu është një pamje e kodit në rast se keni humbur:
Le të testojmë duke ekzekutuar programin dhe duke shtypur butonin e veprimit lundrues. Një pamje e re duhet të shfaqet kur preket.
Për prekjen e fundit
Në rregull, e di që UI nuk duket tamam si ai në figurën 3 dhe nuk ka asnjë mënyrë që ne të mbyllim modalin që shfaqet. Kjo sepse nuk kemi mbaruar ende.
Shtoni një kokë me një buton Done në FullScreenModalView. Ndryshojeni si kjo:
struct FullScreenModalView: View {
@Binding var mainText: String
var body: some View {
VStack {
HStack {
Spacer()
Button(action: {
}) {
Text("Done")
.foregroundColor(Color.white)
}
.padding()
} // HStack
.background(Color.blue)
TextEditor(text: $mainText)
.padding(.horizontal)
} // VStack
} // body
} // FullScreenModalView
Tani pamja duket si ajo e paraqitur në figurën 3.
Për butonin "U krye", ne do të vendosim një veprim heqjeje mbi të, ku prekja mbyll të gjithë pamjen. Fillimisht krijoni një variabël të mbështjellë me vetinë dismiss si kjo:
@Environment(\.dismiss) var dismiss
Pastaj thjesht vendosni funksionin e heqjes dorë në veprimin e butonit si kjo:
Button(action: {
dismiss()
}) {
Text("Done")
.foregroundColor(Color.white)
}
.padding()
Këtu është pamja e ekranit të të gjithë kodit burimor në rast se keni humbur.
Shënim: \.dismiss funksionon vetëm në iOS15 dhe më lart. Këtu është një alternativë për të.
@Environment(\.presentationMode) var presentationMode
Atëherë duhet ta quani të gjithë vlerën e mbështjellë si kjo.
Button(action: {
presentationMode.wrappedValue.dismiss()
}) {
Text("Done")
.foregroundColor(Color.white)
}
.padding()
Këtu është pamja e ekranit të atij që përdor presentationMode.
Momenti që të gjithë e kemi pritur. Ekzekutoni aplikacionin dhe provoni të shkruani deklarata në modal. Ajo duhet të shfaqet në pamjen kryesore që shtypi juaj. Te lumte.
Këtu është "lidhja" e github për kodin burimor.
Qoftë me ju kodi,
-Harku
