Swift UI 完全开发（1-2）第一个程序与Text文字控件

唯念舟

已于 2024-05-02 17:20:26 修改

阅读量547

点赞数 12

分类专栏： SwifitUI完全开发文章标签： swift swiftui ios 学习

于 2024-04-29 17:49:36 首次发布

本文链接：https://blog.csdn.net/m0_73405692/article/details/138320723

版权

SwifitUI完全开发专栏收录该内容

8 篇文章 1 订阅

订阅专栏

Swift UI 完全开发（1-2）

本文对应《Swift UI 完全开发》原书第1章至第2章

第一章第一个SwiftUI项目 ✅
第二章 Text文字使用 ✅
第三章 Image图片使用 ✅
第四章 Stack布局容器使用
第五章 Swift语法入门

✅表示已更新
P.S. 文章内容为个人阅读后认为的重点，顺序与原书存在不一致，有任何疑问欢迎评论。

1 第一个SwiftUI项目

SwiftUI —— 声明式语法用户界面框架

1.1 创建第一个SwiftUI项目

下载后打开Xcode，在Xcode 欢迎界面中点击“Create a new Xcode project”，Xcode会打开一个供开发者选择项目的界面。选择app后选择next:
Product Name 输入项目名称 SwiftUIDemo
选择项目保存路径
点击创建后，新项目创建完了，此时点击左上角的三角形即可运行，iphone15 pro 下的Hello World！运行成功～

1.2 简单分析视图文件代码

如图所示代码结构，在每个视图文件中，我们都需要使用import加载SwiftUI框架，在ContentView视图文件的主体代码框架中，使用VStack垂直布局容器，将内部的所有组件按照纵向进行排布。VStack垂直布局容器使用{}花括号进行包裹内容，这是Swift语法中的闭包写法。

在VStack垂直布局容器中，放置了两个基本的空间Image图片控件和Text文本控件。其中Image图片控件使用【“.”+修饰符】进行修饰美化， .imageScale()修饰符是让图片缩放大小至.large”大“，.foregroudColor()修饰符是修改图片的前景色（填充色）为.tint 当前颜色方案中的 tint 颜色(注：来自于文心一言对代码的解释，该部分与书中内容有差异)。

2 Text文字的使用

2.1 创建新的视图文件

后续学习中，都需要为每个知识点都创建一个新的视图，方便学习和理解

1.选中名为SwiftUIDemo2的文件夹（原书为SwiftUIDemo，文章是在自己验证过后写的，SwiftUIDemo2用于复现截图），鼠标右键点击，选择New File...选项，创建一个新的SwiftUI视图文件。

2.在弹出界面中选择“SwiftUI View”：

[外链图片转存中…(img-XvHPBajl-1714497470681)]

点击“Next”按钮，将新的SwiftUI视图文件命名为“SwiftUIText”，点击“Create”按钮就得到的了新的SwiftUI视图文件。如图所示：

2.2 修饰符格式化文字

修饰符的使用方法为在控件后面使用.加修饰符名称。

2.2.1 `.font()` 修饰符

代码中，告诉SwiftUI，需要设置Text文本控件的字体，设置为字体的内容是字体的大小，调整system系统设备的系统字号size大小为23，在预览窗口可以看到文字的大小实时发生变化。

Text("成为优秀的ios开发者！").font(.system(size: 24))

2.2.2`.foregroundColor()` 修饰符

.foregroundColor()前景色修饰符，使用点语法填写颜色，这里使用的是.gray灰色。

        Text("成为优秀的ios开发者！")
            .font(.system(size: 24))
            .foregroundStyle(.gray)

2.2.3 .fontWeight() 修饰符

使用.fontWeight()字重修饰符，让文字加粗

        Text("成为优秀的ios开发者！")
            .font(.system(size: 24))
            .foregroundStyle(.gray)
            .fontWeight(.bold)

2.2.4 `.lineLimit()` 修饰符

.lineLimit()行数限制修饰符用于设置文字显示最多的行数，超过行数的部分自动省略。

后续会用到（引导用户点击阅读全文）

        Text("但凡能说出的，赞扬的，比喻的，那都不算是隐晦，那都是包装精致的爱语。所谓的隐晦，是将爱意藏在一举一动之中，是渴望表白但又有所顾忌的忐忑。")
            .font(.system(size: 17))
            .foregroundStyle(.gray)
            .lineLimit(2)
            .padding()

2.2.4 `.multilineTextAlignment()` 修饰符

多行文本展示中，系统默认左对齐，使用.multilineTextAlignment() ，可以选择其他文本对齐方式。

        Text("他居然记住了我无意间的话，这感觉很特别")
            .font(.system(size: 17))
            .foregroundStyle(.gray)
            .multilineTextAlignment(.center)
            .padding()

2.2.5 其他修饰符

修饰符	名称	示例
`.tracking()`	字间距	`.tracking(5)`，字间距为5
.lineSpacing()	行间距	lineSpacing(5)，行间距为5
.truncationMode()	截断模式	.truncationMode(.head)，文本头部被截断
.border()	边框	.border(Color.blue, width:1)，边框为蓝色，边框宽度为1
.blur()	模糊	.blur(1)，模糊度为1
.rotationEffect()	2D旋转	.rotationEffect(.degrees(20), anchor:UnitPoint(x:0, y:0))，00为起点旋转20度
.rotation3DEffect()	3D旋转	.rotation3DEffect(.degrees(60), axis:UnitPoint(x:0, y:0, z:0))，空间坐标轴旋转60度