-
本节课演示最基本的Text视图,以及Text视图常见的视觉属性。它和UILabel标签视图类似,主要用来在界面上显示辅助信息。首先隐藏左侧的项目导航区。
-
接着在界面中添加文本视图,界面元素都需要放置在ContentView结构体的body属性中,然后点击此处的Resume按钮,激活预览窗口。
-
body属性的类型为View协议,View是SwiftUI所有界面元素的基础类型。遵循View协议并实现必需的body属性,即可给视图提供自定义的内容和行为。
-
从右侧的同步预览区可以看出,此时在界面中添加一个Text视图,文本视图显示的内容位于双引号之内。并使用点语法,给文本视图应用加粗的显示样式。
-
当继续添加第二个文本视图时,会在右侧的预览区显示两个模拟器。这是因为在定义body属性时,仅需返回一个View。
-
所以我们可以return第二个文本视图。
-
此时即可正常显示倾斜样式的第二个文本视图,而第一个文本视图则被忽略了。接着删除return关键词。
-
我们可以借助SwiftUI提供的布局视图,进行多视图的排版。
-
VStack视图可以将其内部的多个视图,在垂直方向进行等距排列。因此在右侧的预览区域,以纵向排列的方式,显示了两个文本视图。
-
在VStack视图里添加第三个文本视图,并给文本视图添加下划线,同时观察右侧同步预览区域的变化。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iQhLsae1-1630390700823)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_10.png)] -
继续添加第四个文本视图,给文本视图添加下划线,同时设置下划线的颜色为橙色。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gqVTtl6H-1630390700824)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_11.png)] -
添加一个文本视图,并给该文本视图添加删除线。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uQptDCSw-1630390700825)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_12.png)] -
添加一个文本视图,给该文本视图添加删除线,并设置删除线的颜色为橙色。
-
接着添加一个文本视图,并设置文字的颜色。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IkmdF6f8-1630390700832)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_14.png)] -
添加一个文本视图,设置文字的背景颜色为橙色。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0SR4z8Fq-1630390700839)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_15.png)] -
基于点语法的链式特点,我们可以很方便的给文本视图同时添加多个属性。在此设置文字内容在文本视图垂直方向上的偏移值。
-
将一张图片作为文本视图的背景,并设置文字内容位于文本视图的底部。
-
添加一个文本视图,并设置文字的字体尺寸为注脚样式。
-
继续添加一个文本视图,并设置文字的字体尺寸为36。此时Xcode再次出现错误提示,这是因为VStack最多可以容纳十个子视图。
-
所以我们在VStack视图的内部添加一个子VStack视图,这样我们就可以在VStack里添加任意多的子视图了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n3cx8blL-1630390700849)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_20.png)] -
添加一个文本视图,并设置文字的字体为标题样式,该样式可以根据屏幕尺寸的大小,自动调整自身的尺寸。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GvhqnkY3-1630390700850)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_21.png)] -
在此添加一个具有自定义字体的文本视图,并设置字体尺寸为36。
-
添加一个文字视图,并通过字体粗细属性给它设置加粗的效果。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ixorLRYM-1630390700852)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_23.png)] -
最后通过字体粗细方法,添加一个用来显示纤细文字的文本视图。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mg7zK0o3-1630390700854)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_24.png)]
本节源码:
//
// ContentView.swift
// Copyright © www.hdjc8.com
//
import SwiftUI
struct ContentView : View {
var body: some View {
VStack{
Text("www.hdjc8.com")
.bold()
Text("www.hdjc8.com")
.italic()
Text("www.hdjc8.com")
.underline()
Text("www.hdjc8.com")
.underline(true, color: .orange)
Text("www.hdjc8.com")
.strikethrough()
Text("www.hdjc8.com")
.strikethrough(true, color: .orange)
Text("www.hdjc8.com")
.foregroundColor(Color.orange)
.foregroundColor(Color.red)
Text("www.hdjc8.com")
.baselineOffset(CGFloat(5.0))
.background(Color.orange)
Text("www.hdjc8.com")
.background(Image("Picture"), alignment: .bottom)
VStack{
Text("www.hdjc8.com")
.font(.footnote)
Text("www.hdjc8.com")
.font(.system(size: 36))
Text("www.hdjc8.com")
.font(.system(.title, design: .monospaced))
Text("www.hdjc8.com")
.font(.custom("BradleyHandITCTT-Bold", size: 36))
Text("www.hdjc8.com")
.fontWeight(Font.Weight.heavy)
Text("www.hdjc8.com")
.fontWeight(Font.Weight.ultraLight)
}
}
}
}
#if DEBUG
struct ContentView_Previews : PreviewProvider {
static var previews: some View {
ContentView()
}
}
#endif