SwiftUI - Développement d'applications J'ai essayé d'organiser des vues comme ça.
Comme le titre l'indique, j'ai organisé les vues comme ça. Je viens de le placer pour le moment, mais j'ai pu beaucoup étudier.
Cette fois, j'ai essayé d'organiser les vues de manière appropriée, mais j'ai personnellement pensé que c'était assez agréable que l'interface utilisateur Swift puisse organiser les vues proprement grâce au rembourrage et à l'espaceur.
J'ai répertorié certaines des choses que vous pouvez apprendre du code, donc si vous êtes intéressé, essayez de les implémenter.
Ce que tu peux apprendre
-Mise en œuvre d'un protocole identifiable ・ Passer des données entre les vues ・ Temps d'utilisation de @State et @Binding ・ HStack, VStack, ScrollView -Chaque propriété de chaque vue ・ Comment utiliser pour chaque ・ Autour de l'image ・ Basculer () etc
la mise en oeuvre
Mise en œuvre du protocole identifiable
struct Images:Identifiable {
var id = UUID() //← Il semble que vous devez toujours préparer la propriété de l'identifiant.
var name: String
var img:String
}
Vue principale
struct ContentView: View {
//@Si l'état est ajouté, la vue sera redessinée lorsqu'elle sera modifiée.
//@Le partage bidirectionnel des données entre les vues est possible avec la liaison
@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) //Pour passer des variables à CustomBtn$À la tête
}
}
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) //Espace uniquement à gauche et à droite
})
})
//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)
}
}
Les boutons (image et texte) en haut de l'écran sont référencés en créant Struct ci-dessous.
//CustomBtn
struct CustomBtn: View {
let img:Image
let name:String
@Binding var flag:Bool
@Binding var tapName:String //@Le partage bidirectionnel des données entre les vues est possible avec la liaison
var body:some View {
//Button
Button(action: {
//Écrivez ce qui se passe lorsque vous appuyez sur un bouton dans cette section
self.flag.toggle() //faux / vrai Inverse
self.tapName = name
}){
img
.resizable() //Redimensionnez bien l'image
.frame(width: 50, height: 50) //Taille du cadre
Text(name)
.font(.subheadline) //Redimensionner
.fontWeight(.heavy) //Audacieux
.minimumScaleFactor(0.7) //Taille de police minimale (car elle est automatiquement redimensionnée)
.lineLimit(2) //Nombre maximum de lignes
.foregroundColor(Color.white)
Spacer()
}.background(Color(#colorLiteral(red: 0.1695919633, green: 0.164103806, blue: 0.3997933269, alpha: 1)))
.cornerRadius(5.0) //Arrondir un peu les coins
.padding(.horizontal)
}
}
Sorties telles que la disposition de vue de base et le transfert de données entre les vues. Si j'étudie seul, cela fonctionne comme un programme, mais je me demande toujours si c'est vraiment la meilleure pratique. .. Donc, si vous pouvez écrire plus magnifiquement ou plus vite, faites-le moi savoir dans les commentaires.
Je voudrais le garder comme mémorandum à l’avenir.