SwiftUI开发(一)
- 首先需要一个Mac系统
- 安装Xcode
- 使用Xcode
- Text文本操作
- Text段落属性
- Text填充
首先需要一个Mac系统
使用正版的苹果电脑或者黑苹果都行
安装Xcode
根据你mac系统的版本,找寻相关的适配版本,如本文使用的Xcode 11适配mac10.15版本
无论你是正版还是黑苹果,下载Xcode都能去官方下。下载完成后,安装即可。
使用Xcode
开始
首先打开Xcode,并选择Create a new Xcode prohect
然后,选择IOS > Application > Single View Application and hit Next
按照下面的内容填写相关信息
Proudct Name:Test
Organization Name:your name
Organization Identifier:com.yourname
Language:Swift
User Interface:Swift UI
选择一个地方保存,创建好后,会进入项目文件中,此时右侧上分有三个边框,点击可以显示或隐藏检查器图标
而在Xcode11版本中,带来了实时预览的功能,通过该功能,开发者可以实时观察编码效果。点击Resume按钮,激活预览窗口。
激活后,会出现一个手机界面,其下方,可以调节显示比例
若需要关闭预览界面,可以再其界面的右上方选择点击Canvas,或者使用其快捷键,都可以实现隐藏或打开预览界面。
预览界面的右下方,有个类似播放按钮的键。如果界面上包含按钮、表格等需要进行手势操作的控件,就需要点击此处的实时预览按钮,激活实时预览功能,再次点击即可取消
左侧文件列表里:
AppDelegate.swift:应用代理文件,主要用来监听来自其它程序的外部事件,或者在程序启动之后进行预处理操作,通常在2程序启动之后,通过子线程进行本地数据的更新操作。
SceneDelegate.swift:场景代理文件,主要用来处理分屏功能,并管理应用程序的显示方式,例如让多个实例同时运行,或在一个实例移至后台时采取措施。
ContentVIew.swift:内容视图文件,是默认的用户界面,开发者可以在此文件中进行用户界面的设计和布局。当然对于复杂的用户界面,我们可以创建多个内容视图文件。
剩下的几个文件先不讲,目前还用不上。
接着切回ContentView.swift文件,点击右侧的Resume,打开实时预览。再看回文件中的代码。
body属性的类型为View协议,View是SwiftUI所有界面元素的基础类型。遵循View协议并实现必需的body属性,即可给视图提供自定义的内容和行为。
从代码和同步预览区可以看出,此时在界面中的Text视图,文本视图显示的内容位于双引号之间。
Text文本操作
接下来讲解一些对Text文本操作的语法,语法和文本在同一个body内,跟在你需要更改的文本之后。
如果我们想对文本的内容进行加粗
这样就能使得文本字体变粗,如果还想对该文本进行其他操作,接在后面继续加即可。但如果想添加多个文本,就需要将多个Text文本放在VStack视图下。VStack视图可以将其内部的多个视图,在垂直方向进行等距排列,因此就能在预览区域,以纵向排列的方式,显示两个文本视图。
而Xcode有个更简单的方法,点击右上角的 + 号,打开组件库,
打开组件库后,可以在组件库中找到Text,然后拖拽到预览图里的text的下方,即可在text下方添加一个新的text文本框,并且,我们可以看到左边代码会自动添加一个VStack视图,如下图
这是右边预览的情况
这是左边代码的情况
接着,讲解一些对Text相关的语法
.italic() #文本倾斜
.underline() #下划线
.underline(true, color: .orange) #下划线,并将下划线改成橙色
.strikethrough() #添加删除线
.strikethrough(true, color: .red) #下划线,并将下划线改成红色
.foregroundColor(Color .yellow) #更改文字颜色为黄色
.background(Color .blue) #更改文本框背景色为蓝色
.baselineOffset(CGFloat(15.0)) #设置文本内容在垂直方向上的偏移值
.background(Image("Picture"), alignment: .bottom) #将一张图片作为文本视图的背景,并设置文字内容位于文本视图的底部
.font(.footnote) #设置文字的字体尺寸为注脚样式
.font(.system(size: 36)) #设置字体尺寸为36
.font(.system(.title, design: .monospaced)) #设置文字的字体为标题样式,该样式可以根据屏幕尺寸的大小,自动调整自身的尺寸
.font(.custom("BradleyHandITCTT-Bold", size: 36)) #将字体改为指定字体,并将尺寸设置为36
.fontWeight(Font.Weight.heavy) #添加一个文字视图,并通过字体粗细属性给它设置加粗效果
.fontWeight(Font.Weight.ultraLight #通过文字粗细属性,添加一个纤细的字体效果
注意: VStack视图里面只能存放10个子视图,所以要在第十个子视图之后继续存放的话,需要在第一个VStack子视图里,再添加一个VStack视图
Text段落属性
接着,讲解一些文本视图的段落属性,通过这些段落属性可以调整文字的字距、行距、偏移值、框架和对齐方式等视觉样式。
.tracking(10) #调整字距为10
.kerning(10) #调整字母间距为10
.blur(radius: 10) #添加模糊效果,并设置模糊的半径为1
.lineSpacing(20) #设置行距为20
.lineLimit(nil) #同时不限制文字的行数
.offset(x: 40, y: 0) #设置文字内容在水平方向上,向右侧偏移40点的距离
.frame(width: 200, height: 80, alignment: .bottomTrailing) #设置文本的宽度为200,高度为80,内容位于文本视图的右下角
.frame(width: 200, height: 80, alignment: #设置文本的宽度为200,高度为80,内容位于文本视图的中心位置
.position(x: 50, y: 50) #调用文本视图的位置方法,使文本向右和向下各偏移50点的位置。该方法会使对齐属性失效
.multilineTextAlignment(.center) #多行对齐,中心对齐
Text填充
因为程序是链式结构的原因,所以放置语法的位置影响很大
这就是典型的例子,借由此特效,我们可以做到一个渐变效果
先将文本框的大小扩至到最大,接着使用edgesIgnoringSafeArea取消安全区,让文本框填充,实现全屏幕覆盖
.frame(miniWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).edgesIgnoringSafeArea(.all)