Afin de mieux comprendre et apprendre SwiftUI, apprenons rapidement les trois dispositions de base de SwiftUI : conteneur de HStackdisposition horizontale, conteneur VStackde disposition verticale et ZStackconteneur de disposition en cascade.
Dans le processus de développement proprement dit, la page de connexion est une page indispensable pour les produits mobiles, et c'est aussi un projet de bonne pratique.
Ensuite, nous utiliserons 10 minutes pour créer une mise en page de page de connexion, en prenant comme exemple le projet de conception d'interface utilisateur suivant :
Analyse de page - Composition des éléments
En utilisant l' idée de conception descendante pour désassembler les éléments du projet de conception de l'interface utilisateur, les informations suivantes peuvent être obtenues :
- Image d'arrière-plan : utilisez le composant de base Image, vous devez étirer le plein écran et d'autres éléments se trouvent à l'intérieur de l'image.
- Texte de description : deux paragraphes de texte de tailles différentes sont composés d'une mise en page verticale et l'alignement est aligné à gauche
- Méthode de connexion : la disposition verticale de deux boutons avec une couleur de remplissage et une couleur de texte incohérentes, et la méthode d'alignement est l'alignement au centre
- Texte secondaire : se compose de texte et de boutons de texte disposés horizontalement
Après avoir démonté les éléments de la page, l'étape suivante consiste à programmer le code en fonction des éléments de la page et de leur mise en page.
Programmation pratique - image de fond
Dans le projet de programmation SwiftUI, il existe deux manières d'afficher des images, l'une consiste à charger l'image localement via l'URL de l'image obtenue par la requête réseau , et l'autre consiste à importer l' image préparée et à l'utiliser directement.
Le premier peut mettre à jour les images en fonction des différentes données de la demande, et le second est plus couramment utilisé dans les scénarios commerciaux tels que les arrière-plans de page qui n'ont fondamentalement pas besoin d'être modifiés.
L'interface de connexion appartient à ce dernier, nous pouvons donc directement importer les images requises dans les outils de développement Xcode.
Cliquez sur le fichier dans la barre d'outils d'affichage Assets.xcassets, cliquez sur l'icône "+" en bas et sélectionnez Import, comme indiqué dans la fenêtre contextuelle suivante :
Sélectionnez l'image et importez-la. Une fois l'importation terminée, vous pouvez voir l'image importée dans la zone d'aperçu des actifs.
Afin de faciliter l'utilisation ultérieure, l'image est renommée ici bgImage, comme le montre la figure suivante :
回到ContentView文件，这是SwiftUI提供的一个示例视图页面，我们使用Image图片组件引用导入的图片，示例：
struct ContentView: View {
var body: some View {
Image("bgImage")
}
}
复制代码SwiftUI图片组件使用方式为括号内，使用双引号对对象进行引用，这里Image组件引用的对象是在Assets资源库导入的bgImage图片。
实时预览后发现，由于图片尺寸大于整机屏幕尺寸，导致图片超出了可视范围。这时需要图片的常用修饰符对Image图片进行修饰，示例：
Image("bgImage")
.resizable()
.edgesIgnoringSafeArea(.all)
复制代码这里使用了2个修饰符，resizable修饰符可以对Image图片进行缩放，使图片缩放到模拟器显示范围内。
而edgesIgnoringSafeArea修饰符可对视图忽略其安全区域，这时iPhoneX以上全面屏的特性，在顶部状态栏和底部栏的区域留有安全区域，edgesIgnoringSafeArea可以忽略安全区域，让Image图片撑开整个屏幕。
实战编程-说明文字
文字部分使用Text组件，和Image组件使用方法类似，在括号内使用双引号引用文本信息，示例：
Text("开启你的意识世界")
复制代码当我们使用Text组件时，预览区域展示了2个模拟器，这是因为之前创建的Image组件和Text组件缺少布局关系，Xcode开发工具就将它们当作单独的视图分开预览。
由上面分析得知，背景图片和其他元素是层叠关系，因此需要使用到ZStack容器将多个元素进行层叠布局。
ZStack{
Image("bgImage")
.resizable()
.edgesIgnoringSafeArea(.all)
Text("开启你的意识世界")
}
复制代码视图容器的使用方式是用大括号将元素包裹在一起，包裹中的元素将符合视图容器的排列方式。
说明文字有2部分，2段文字排列方式为上下排列，由于文字字数不一，使用左对齐方式。代码如下：
VStack(alignment: .leading, spacing: 10){
Text("开启你的意识世界")
Text("首次登录自动创建新账号")
}
复制代码在VStack垂直布局容器中，修改视图的对齐方式及视图内部元素之间的间距视图括号包裹，alignment参数设置视图内元素的对齐方式，这是使用的是leading左对齐。
spacing参数设置视图内所有元素的间距，如果同样是垂直布局的元素间距不一样，则需要多个VStack垂直布局容器进行包裹。
和Image图片组件修饰符使用方法一样，可以对Text添加修饰符对文字对象进行修饰，代码如下：
VStack(alignment: .leading, spacing: 10){
Text("开启你的意识世界")
.font(.title)
.bold()
Text("首次登录自动创建新账号")
.font(.system(size: 17))
}
复制代码font修饰符可以对Text文字的字号、字体进行修饰，bold修饰符可以设置文字的字重，另外常用的文字修饰符像foregroundColor修饰符可以设置文字的填充颜色等。
实战编程-登录方式
登录方式由2个登录按钮组成，登录按钮的布局方式也是垂直布局，并且2个按钮采用的是居中对齐方式。除了考虑登录方式按钮本身外，还需要考虑登录方式和说明文字的布局方式，此部分代码如下：
VStack(alignment: .leading, spacing: 400) {
//说明文字
//登录方式
VStack(alignment: .center, spacing: 15) {
Button(action: {}) {
Text("手机号码登录")
.font(.system(size: 17))
.bold()
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(.red)
.cornerRadius(8)
}
Button(action: {}) {
Text("微信登录")
.font(.system(size: 17))
.bold()
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.black)
.background(.white)
.cornerRadius(8)
}
}
}.padding()
复制代码在说明文字和登录方式两块元素上，这里使用VStack垂直布局容器，并设置视图内对齐方式为左对齐，说明文字和登录方式视图的间距为400。
登录方式视图分为2个按钮：手机号码登录、微信登录，按钮使用到的组件是Button组件，由于Button组件的使用方式如下：
Button(action:{
//点击后操作
}) {
//按钮样式
}
复制代码Button组件样式上和其他组件一致，即任何视图都可以作为按钮，这里使用的是Text文字视图作为按钮的主体样式，并设置文字修饰符对Text视图进行修饰美化。
其中，frame修饰符可以设置组件的尺寸大小，由于iOS机型和显示区域不一，因此使用minWidth最小宽度和maxWidth最大宽度，最大宽度maxWidth设置为infinity自适应。
paddingLe modificateur définit la marge du texte. Le backgroundmodificateur définit l'arrière-plan de l'affichage Texte pour inclure la couleur de remplissage de la mise en page qui étire la marge. Le cornerRadiusmodificateur définit le nombre d'angles arrondis.
Il convient de noter ici que l'ordre des modificateurs détermine le style et que les modificateurs affectés à la vue sont prioritaires. Par exemple , si le modificateur est à l' backgroundavant et le paddingmodificateur à l'arrière, le bouton n'aura qu'un petit peu derrière le texte rempli de couleur. L'effet actuel ne peut pas être obtenu.
Programmation pratique - texte auxiliaire
Enfin, il y a la partie texte auxiliaire, qui peut être divisée en 4 paragraphes après analyse : 登录即代表同意(texte), 用户协议(bouton), 和(texte), 隐私政策(bouton), et le contenu de ces quatre paragraphes adopte une disposition horizontale.
En outre, la relation de mise en page avec d'autres éléments doit également être prise en compte. De haut en bas, la vue du mode de connexion est dans la relation de mise en page verticale . Cette partie du code est la suivante :
VStack(alignment: .center, spacing: 40) {
//登录方式视图
//辅助文字视图
HStack {
Text("登录即表明同意")
.foregroundColor(.white)
Button(action: {}) {
Text("用户协议")
}
Text("和")
.foregroundColor(.white)
Button(action: {}) {
Text("隐私政策")
}
}
}
复制代码résumé du chapitre
Félicitations, vous avez terminé votre première page SwiftUI !
Dans ce chapitre, nous avons appris trois méthodes de mise en page de base : HStackmise en page horizontale, mise en VStackpage verticale et ZStackmise en page en cascade, et nous avons appris l'utilisation des composants de base , des composants d' Imageimage, des composants de Texttexte et Buttondes composants. Bien entendu, nous n'avons terminé que le style de page L'interaction fonctionnelle doit encore être améliorée, mais après avoir franchi cette étape, la route de l'apprentissage SwiftUI sera beaucoup plus facile.
J'espère que vous pourrez non seulement lire l'article, mais aussi vous enfoncer et taper le code. Lorsqu'une page après l'autre vole au bout de vos doigts, je pense que vous aurez également la confiance et l'intérêt d'en savoir plus sur SwiftUI et de comprendre sa simplicité. .
Dans le prochain chapitre, nous en apprendrons plus sur les projets SwiftUI et nous créerons un projet après l'autre. Veuillez continuer à l'attendre avec impatience ~
Copyright
Cet article est le premier article signé de la communauté technologique des pépites de terres rares. La réimpression est interdite dans les 14 jours et la réimpression est interdite sans autorisation après 14 jours. La violation doit faire l'objet d'une enquête !