第1章第2节：使用Text视图显示指定的文字 [SwiftUI快速入门到实战]

• 本课程源码下载：互动教程网 http://hdjc8.com/hdjc/swiftUI/

1. 本节课演示最基本的Text视图，以及Text视图常见的视觉属性。它和UILabel标签视图类似，主要用来在界面上显示辅助信息。首先隐藏左侧的项目导航区。
   

2. 接着在界面中添加文本视图，界面元素都需要放置在ContentView结构体的body属性中，然后点击此处的Resume按钮，激活预览窗口。
   

3. body属性的类型为View协议，View是SwiftUI所有界面元素的基础类型。遵循View协议并实现必需的body属性，即可给视图提供自定义的内容和行为。
   

4. 从右侧的同步预览区可以看出，此时在界面中添加一个Text视图，文本视图显示的内容位于双引号之内。并使用点语法，给文本视图应用加粗的显示样式。
   

5. 当继续添加第二个文本视图时，会在右侧的预览区显示两个模拟器。这是因为在定义body属性时，仅需返回一个View。
   

6. 所以我们可以return第二个文本视图。
   

7. 此时即可正常显示倾斜样式的第二个文本视图，而第一个文本视图则被忽略了。接着删除return关键词。
   

8. 我们可以借助SwiftUI提供的布局视图，进行多视图的排版。
   

9. VStack视图可以将其内部的多个视图，在垂直方向进行等距排列。因此在右侧的预览区域，以纵向排列的方式，显示了两个文本视图。
   

10. 在VStack视图里添加第三个文本视图，并给文本视图添加下划线，同时观察右侧同步预览区域的变化。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iQhLsae1-1630390700823)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_10.png)]

11. 继续添加第四个文本视图，给文本视图添加下划线，同时设置下划线的颜色为橙色。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gqVTtl6H-1630390700824)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_11.png)]

12. 添加一个文本视图，并给该文本视图添加删除线。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uQptDCSw-1630390700825)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_12.png)]

13. 添加一个文本视图，给该文本视图添加删除线，并设置删除线的颜色为橙色。
    

14. 接着添加一个文本视图，并设置文字的颜色。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IkmdF6f8-1630390700832)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_14.png)]

15. 添加一个文本视图，设置文字的背景颜色为橙色。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0SR4z8Fq-1630390700839)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_15.png)]

16. 基于点语法的链式特点，我们可以很方便的给文本视图同时添加多个属性。在此设置文字内容在文本视图垂直方向上的偏移值。
    

17. 将一张图片作为文本视图的背景，并设置文字内容位于文本视图的底部。
    

18. 添加一个文本视图，并设置文字的字体尺寸为注脚样式。
    

19. 继续添加一个文本视图，并设置文字的字体尺寸为36。此时Xcode再次出现错误提示，这是因为VStack最多可以容纳十个子视图。
    

20. 所以我们在VStack视图的内部添加一个子VStack视图，这样我们就可以在VStack里添加任意多的子视图了。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n3cx8blL-1630390700849)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_20.png)]

21. 添加一个文本视图，并设置文字的字体为标题样式，该样式可以根据屏幕尺寸的大小，自动调整自身的尺寸。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GvhqnkY3-1630390700850)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_21.png)]

22. 在此添加一个具有自定义字体的文本视图，并设置字体尺寸为36。
    

23. 添加一个文字视图，并通过字体粗细属性给它设置加粗的效果。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ixorLRYM-1630390700852)(http://www.hdjc8.com/screens/swiftui/menu1lesson2_23.png)]

24. 最后通过字体粗细方法，添加一个用来显示纤细文字的文本视图。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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