SwiftUI 精通之路01: 新的项目工程搭建起步创作者训练营更新计划：在人生的道路上，从来没有全身而退，坐享其成，

前言

前言：其实我感觉自己没有坚持写文章的动力，目前自己也是在开始学习iOS开发相关的技术，并且前段时间也在第四期创作者训练营开始之初写下了自己首篇自己学习的总结：MapKit的使用

其实后面发现自己想法欠缺想法，还是需要进行阶段性的总结以及记录，这样才能知道自己掌握程度，脑子这个东西还是需要定期去唤醒才行！所以我又继续之前的想法，把建立的这个专栏继续下去，也是整理自己的知识体系。

希望对看到的陌生人有帮助，但是肯定对我目前是有很大的帮助！

今日学习鸡汤：在人生的道路上，从来没有全身而退，坐享其成，不劳而获一说。你不努力，就得出局。

在本章中，我们主要掌握以下方面：

学习如何搭建我们的iOS项目开发环境
基本的Text文本组件的使用
了解什么是修饰器以及Text组件的修饰器的使用

项目搭建

首先我们启动Xcode，点击Create New Project，开始启动创建我们的项目。

CleanShot 2024-09-05 at 13.28.11.png

然后我们在弹出来的应用类目中我们选择iOS, 其次选择App模板，然后点击Next下一步进入项目基本信息配置。

CleanShot 2024-09-05 at 13.30.03.png

在项目基本信息配置页面中, 我们进行如下的配置：

Product Name(项目名称)：SwiftUIMasteryPathBootcamp，意思是SwiftUI精通之路训练营，其实项目名称这块你可以自定义，使用其他名称。
Team(团队)：这块你可以选择公司或者个人开发团队名称，也可以配置none,我这边选择我自己的开发者账号。
Organization Identifier(组织标识符号)：我这边设置为自己英文名
Interface(用户界面框架)：我们选择SwiftUI
Language(开发语言)：选择Swift
其他的配置我们不进行选择...

CleanShot 2024-09-05 at 13.40.23.png

基本配置结束后，我们就可以点击Next进行到下一步，配置我们项目的存储位置,我们就OK的搭建我们开发的项目的环境。

这里插播一条未来可能需要知道的知识点，就是我们知道官方的API有很多的版本，他是跟着iOS系统去进行迭代的，每次新的系统的发布都会出现很多的新的功能，新的功能出现可能就会有新的API出来，这里想说的就是呢，我们当前搭建的环境，我们可以设置我们目前使用的API的版本。低版本不能使用高版本的API，但是高版本的API不能在低版本的系统上运行。

我们可以点击项目目录最顶层的文件 > TARGETS > General > Mininum Deployments 配置我们的API版本。

Text文本组件的使用以及修饰器的概念

下面我们学习关于Text文字组件的基本使用。在ContentView.swift文件中我们可以看到我们应用官方的模版创建iOS应用后官方给的示例代码。

VStack {
    Image(systemName: "globe")
        .imageScale(.large)
        .foregroundStyle(.tint)
        Text("Hello, world!")
}
.padding()

该代码段主要是创建了垂直布局的结构，在这个垂直布局的结构里面初始化一个文本以及一个地球的图片。当然图片元素应用了修饰器Modifiers去配置图片的颜色以及缩放比例。

修饰器（Modifiers）在 SwiftUI 中，是用来对视图进行修饰、布局、交互和外观调整的重要工具。修饰器是链式调用的，允许你对视图进行组合式的修改，并且不会直接修改原始视图，而是返回一个新的视图。有布局修饰器，例如上面的Vstack(垂直布局)，样式修饰器（改变元素的颜色等），行为修饰器(onAppear等)，动画修饰器，布局控制修饰器（zIndex）。

简单来说就是SwiftUI中修饰器类似于网页端中的CSS,用来改变控件的属性，例如颜色，尺寸，位置等等。

下面我们基本探索下Text控件的修饰器的使用：

Text("Hello, world!")
    // 设置字体大小 - 会根据屏幕尺寸自适应
    .font(.title)
    // 设置字体大小 - 固定字体大小
    .font(.system(size: 25))

CleanShot 2024-09-05 at 14.21.53@2x.png

Text("Hello, world!")
    .font(.title)
    // 设置字体加粗程度
    .fontWeight(.bold)

Text("Hello, world!")
    .font(.title)
    .fontWeight(.bold)
    // 设置字体前景色
    .foregroundStyle(Color.blue)

Text("Hello, world!")
    .font(.title)
    .fontWeight(.bold)
    .foregroundStyle(Color.blue)
    // 设置内边距
    .padding()
    // 设置边框
    .border(.blue, width: 1)

最后我们修改下实现这样效果：

Text("Hello, world!")
    .font(.title)
    .fontWeight(.bold)
    .foregroundStyle(Color.white)
    .padding()
    .border(.blue, width: 5)
    // 添加背景颜色
    .background(.black)
    // 添加圆角
    .cornerRadius(5)

扩展探索

我们简单看看移动端设备的三维坐标：

我们对文字可以进行简单的样式设置同时也可以进行空间维度的设置，例如三维维度进行设置。这是最终探索的代码：

VStack {
    Text("Hello, world!Hello, world!Hello, world!Hello, world!Hello, world!")
        // 设置字体大小 - 会根据屏幕尺寸自适应
        .font(.title)
        // 设置字体加粗程度
        .fontWeight(.bold)
        // 设置字体前景色
        .foregroundStyle(Color.white)
        // 设置内边距
        .padding()
        // 设置边框
        .border(.blue, width: 5)
        .background(.black)
        .cornerRadius(5)
        // 圆角新的方案
        //.clipShape(RoundedRectangle(cornerRadius: 5))
        // 2D旋转探索
        //.rotationEffect(Angle(degrees: 10), anchor: .center)
        // 多行文本对齐方式 - 可以左边对齐，右边对齐以及中间对齐
        .multilineTextAlignment(.center)
        // 设置行间距
        .lineSpacing(20)
        // 模糊效果
        .blur(radius: 1)
        // 第一个参数设置旋转角度，第二个参数设置旋转的轴线（根据什么进行旋转角度）
        .rotation3DEffect(Angle(degrees: 50), axis: (x: 1, y: 0, z: 0))
}
.padding()

CleanShot 2024-09-05 at 14.49.03@2x.png

希望对自己有帮助，坚持，量变才会质变！