SwiftUI --App-Entwicklung Ich habe versucht, solche Ansichten zu arrangieren.
Wie der Titel schon sagt, habe ich die Ansichten so angeordnet. Ich habe es vorerst nur platziert, aber ich konnte viel lernen.
Dieses Mal habe ich versucht, die Ansichten angemessen anzuordnen, aber ich persönlich fand es sehr schön, dass die Swift-Benutzeroberfläche die Ansichten dank der Polsterung und des Abstandshalters ordentlich anordnen kann.
Ich habe einige Dinge aufgelistet, die Sie aus dem Code lernen können. Wenn Sie also interessiert sind, versuchen Sie, sie zu implementieren.
Was du lernen kannst
-Implementierung des identifizierbaren Protokolls ・ Daten zwischen Ansichten übertragen ・ Zeitpunkt für die Verwendung von @State und @Binding ・ HStack, VStack, ScrollView -Jede Eigenschaft jeder Ansicht ・ Verwendung für jeden ・ Runden Sie das Bild ab · Umschalten () etc
Implementierung
Implementierung des identifizierbaren Protokolls
struct Images:Identifiable {
var id = UUID() //← Es scheint, dass Sie immer die Eigenschaft des Bezeichners vorbereiten müssen.
var name: String
var img:String
}
Hauptansicht
struct ContentView: View {
//@Wenn Status hinzugefügt wird, wird die Ansicht beim Ändern neu gezeichnet.
//@Der bidirektionale Datenaustausch zwischen Ansichten ist mit Binding möglich
@State var flag:Bool = false
@State var tapName:String = "tapNAME"
private var images = [Images(name: "Xxxx Xxxx", img: "myimage"),
Images(name: "Aaaaa Aaaa", img: "myimage"),
Images(name: "Bbbbb Bbbb", img: "myimage"),
Images(name: "Ccccc Cccc", img: "myimage"),
Images(name: "Ddddd Dddd", img: "myimage"),
Images(name: "Eeeee Eeee", img: "myimage"),
Images(name: "Fffff Ffff", img: "myimage"),
Images(name: "Ggggg Gggg", img: "myimage")]
var body: some View {
VStack {
ScrollView(.vertical, showsIndicators: false, content: {
HStack {
Image(images.first?.img ?? "NoImage")
.resizable()
.frame(width: 75, height: 75)
.clipShape(Circle())
.overlay(Circle().stroke(Color.white,lineWidth: 1))
.shadow(radius: 10)
.padding(.leading)
Text(images.first?.name ?? "NoName")
.font(.title2)
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding(.leading)
Spacer()
Image(systemName: "bell.badge")
.font(.title)
.foregroundColor(Color.white)
.padding(.trailing)
}.padding(.top)
Text(tapName).foregroundColor(.white)
ScrollView(.horizontal, showsIndicators: false, content: {
HStack {
ForEach(images) { image in
CustomBtn(img: Image(image.img), name: image.name, flag: $flag, tapName: $tapName) //Variablen an CustomBtn übergeben$Zum Kopf
}
}
HStack {
ForEach(images) { image in
CustomBtn(img: Image(image.img), name: image.name, flag: $flag, tapName: $tapName)
}
}
}).padding(.top)
//MARK:- First CollectionView
VStack(alignment: .leading, spacing: nil, content: {
Text("First CollectionView")
.font(.title)
.foregroundColor(Color.white)
.fontWeight(.bold)
.padding(.top).padding(.leading)
ScrollView(.horizontal, showsIndicators: false, content: {
HStack {
ForEach(images) { image in
Image(image.img)
.resizable()
.frame(width: 150, height: 150, alignment: .center)
.cornerRadius(5.0)
}
}.padding(.leading).padding(.trailing) //Platz nur links und rechts
})
})
//MARK:- Seccond CollectionView
VStack(alignment: .leading, spacing: nil, content: {
Text("Seccond CollectionView")
.font(.title)
.foregroundColor(Color.white)
.fontWeight(.bold)
.padding(.top).padding(.leading)
ScrollView(.horizontal, showsIndicators: false, content: {
HStack {
ForEach(images) { image in
Image(image.img)
.resizable()
.frame(width: 150, height: 150, alignment:.center)
.cornerRadius(5.0)
.clipShape(Circle())
}
}.padding(.leading).padding(.trailing)
})
})
//MARK:- Third CollectionView
VStack(alignment: .leading, spacing: nil, content: {
Text("Third CollectionView")
.font(.title)
.foregroundColor(Color.white)
.fontWeight(.bold)
.padding(.top).padding(.leading)
ScrollView(.horizontal, showsIndicators: false, content: {
HStack {
ForEach(images) { image in
Image(image.img)
.resizable()
.frame(width: 250, height: 150, alignment:.center)
.cornerRadius(5.0)
}
}.padding(.leading).padding(.trailing).padding(.bottom)
})
})
//-------
})
}.padding(.top)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(#colorLiteral(red: 0.09886621684, green: 0.1093793288, blue: 0.2782805264, alpha: 1)))
.edgesIgnoringSafeArea(.all)
}
}
Auf die Schaltflächen (Bild und Text) am oberen Bildschirmrand wird durch Erstellen der Struktur unten verwiesen.
//CustomBtn
struct CustomBtn: View {
let img:Image
let name:String
@Binding var flag:Bool
@Binding var tapName:String //@Der bidirektionale Datenaustausch zwischen Ansichten ist mit Binding möglich
var body:some View {
//Button
Button(action: {
//Schreiben Sie in diesem Abschnitt, was passiert, wenn Sie eine Taste drücken
self.flag.toggle() //false / true Invertiert
self.tapName = name
}){
img
.resizable() //Ändern Sie die Größe des Bildes
.frame(width: 50, height: 50) //Rahmengröße
Text(name)
.font(.subheadline) //Größe ändern
.fontWeight(.heavy) //Fett gedruckt
.minimumScaleFactor(0.7) //Minimale Schriftgröße (da die Größe automatisch geändert wird)
.lineLimit(2) //Maximale Anzahl von Zeilen
.foregroundColor(Color.white)
Spacer()
}.background(Color(#colorLiteral(red: 0.1695919633, green: 0.164103806, blue: 0.3997933269, alpha: 1)))
.cornerRadius(5.0) //Um die Ecken ein wenig
.padding(.horizontal)
}
}
Ausgaben wie das grundlegende Layout der Ansicht und die Datenübertragung zwischen Ansichten. Wenn ich alleine lerne, funktioniert es als Programm, aber ich frage mich immer, ob dies wirklich die beste Praxis ist. .. Wenn Sie also schöner oder schneller schreiben können, lassen Sie es mich bitte in den Kommentaren wissen.
Ich möchte es in Zukunft als Memorandum behalten.