第1章第4节：Text视图的填充属性 [SwiftUI快速入门到实战]

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

1. 本节课演示文本视图的内部填充属性，开发者可以使用填充属性，修改文字内容和文本视图边框之间的距离，即修改文本视图的上下左右的内边距。
   

2. 为了更加清楚的显示填充属性，首先给文本视图设置黑色作为背景颜色，设置白色作为文字颜色。
   

3. 设置填充属性的值为20，增加文本视图与文字内容的间距。
   

4. 链式调用的顺序由上而下进行，所以首先设置第二个文本视图的内边距，然后再给文本视图设置背景颜色和字体颜色，这时内边距也会拥有相应的背景颜色。
   

5. 接着给文本视图添加多个填充属性，以创建由外向内颜色渐变的边框。首先添加一个新的文本视图。
   

6. 设置文字内容的样式为巨型标题样式，以突出显示文字内容。
   

7. 设置填充属性的值为15，增加文本视图与文字内容的间距。
   

8. 设置文本视图的背景颜色为黄色。
   

9. 继续设置填充属性的值为15，在文本视图的外围，再次增加15点的间距。
   

10. 给新的内边距设置填充颜色为橙色。
    

11. 再次设置填充属性的值为10，在文本视图的第二层外围增加10点的间距。
    

12. 最后给新的内边距设置填充颜色为红色，从而给文本视图添加由红至黄的渐变边框。
    

//
//  ContentView.swift
//  Copyright © www.hdjc8.com
//

import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack{
            Text("www.hdjc8.com")
                .background(Color.black)
                .foregroundColor(.white)
                .padding(20)
            
            Text("www.hdjc8.com")
                .padding()
                .background(Color.black)
                .foregroundColor(.white)
            
            Text("Swift User Interface")
                .font(.largeTitle)
                .padding(15)
                .background(Color.yellow)
                .padding(15)
                .background(Color.orange)
                .padding(10)
                .background(Color.red)
        }
        
    }
}


#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif