自学IOS开发第2天·学习基础SwiftUI

使用 SwiftUI 应用程序生命周期的应用程序具有符合App协议的结构。该结构的body属性返回一个或多个场景，这些场景又提供显示内容。该@main属性标识应用程序的入口点。

---

在左侧的目录中选择：ContentView.swift，看到如下代码：

import SwiftUI

struct ContentView: View {

var body: some View {

Text(“Hello, World!”)

.padding()

}

}

struct ContentView_Previews: PreviewProvider {

static var previews: some View {

ContentView()

}

}

默认情况下，SwiftUI 视图文件声明两个struct。第一个struct符合View协议并描述视图的内容和布局(3-8 line)。第二个struct声明该视图的预览(10-14 line)。

---

点击Resume显示布局的实时预览，如果此部分不存在，可以按照步骤： Editor > Canvas 来显示此部分模块

ps：可以在上侧选择指定的机型进行预览和运行

---

基本UI

---

接下来会用到View：Text()、Image()、Divider() 和容器 HStack()、VStack()

在右侧的预览中，按住Command后，单机 “Hello World” Text()这一View

出现以下弹框，点击 “Show SwiftUI Inspector”

---

在这里便可以调整Text的属性，在这里调整，左侧的代码也会实时变动。同样也可以在左侧直接编写View代码，预览也会实时改变。

构建简单视图

接下来构建一些简单的视图，这一部分结合着SwiftUI第一章教程来学习

SwiftUI第一章教程：https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

HStack()：横向堆栈容器

VStack()：纵向堆栈容器

现在来构建下面的视图（这个不是列表，不是列表，不是列表）：

创建CircleImage

右击左侧目录项目，NewFile，出现如下图：

选中 SwiftUI View，然后点击 Next

输入 CircleImage 后，点击 Create ，创建成功！

如下代码，用于显示圆形头像

//

// CircleImage.swift

// imrku

//

// Created by imrku on 2021/10/21.

//

import SwiftUI

struct CircleImage: View {

var res:String

init(res:String){

self.res = res

}

var body: some View {

//看这里，这里是主要的

Image(res)

.resizable(resizingMode: .stretch)

.frame(width: 60, height: 60)

.clipShape(Circle())

.shadow(radius: 2)

}

}

//预览

struct CircleImage_Previews: PreviewProvider {

static var previews: some View {

CircleImage(res: “face1”)

}

}

---

完成视图

之后回到ContentView，继续完成基本博主们的展示

//

// ContentView.swift

// imrku

//

// Created by imrku on 2021/10/21.

//

import SwiftUI

struct ContentView: View {

var body: some View {

VStack(alignment: .center) {

HStack(){

CircleImage(res: “face1”)

VStack(){

HStack(){

Text(“第三女神程忆难”)

.font(.title2)

Spacer()

}

HStack(){

Text(“立名程忆难，忆程序人生之难矣！”)

.font(.subheadline)

.foregroundColor(Color.gray)

Spacer()

}

.padding(.top ,-10.0)

}

Spacer()

}

.padding()

Divider()//分割线

HStack(){

CircleImage(res: “face2”)

VStack(){

HStack(){

Text(“梦想橡皮擦”)

.font(.title2)

Spacer()

}

HStack(){

Text(“为你在IT圈“打怪升级”提供辅助！”)

.font(.subheadline)

.foregroundColor(Color.gray)

Spacer()

}

.padding(.top ,-10.0)

}

Spacer()

}

.padding()

Divider()//分割线

HStack(){

CircleImage(res: “face3”)

VStack(){

HStack(){

Text(“1_bit”)

.font(.title2)

Spacer()

}

HStack(){

Text(“我就是一个热心的神奇海螺！”)

.font(.subheadline)

.foregroundColor(Color.gray)

Spacer()

}

.padding(.top ,-10.0)

题外话

我们见过很多技术leader在面试的时候，遇到处于迷茫期的大龄程序员，比面试官年龄都大。这些人有一些共同特征：可能工作了7、8年，还是每天重复给业务部门写代码，工作内容的重复性比较高，没有什么技术含量的工作。问到这些人的职业规划时，他们也没有太多想法。

其实30岁到40岁是一个人职业发展的黄金阶段，一定要在业务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。

不断奔跑，你就知道学习的意义所在！

注意：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）**

[外链图片转存中…(img-QfznElX3-1714688785669)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！