2.3_如何使用padding控制单个视图周围的间距

SwiftUI 允许我们使用 padding() 修饰符在视图周围设置单独的填充。

1. 系统默认 padding

如果在不传参数的情况下使用 padding() ，我们将在视图的四周获得系统默认填充，如下所示:

struct ContentView: View {
    var body: some View {
        VStack {
            // 1. 系统默认 padding
            Text("Hello SwiftUI")
                .background(Color.red)
                .padding()
            Text("Hello M X")
                .background(Color.blue)
        }
    }
}

效果预览:

注意: 这里默认设置了视图四周的填充。

2. 只设置一侧系统默认 padding

我们也可以自定义要应用的 填充 和 位置。因此，我们只希望将系统填充应用于一侧:

struct ContentView: View {
    var body: some View {
        VStack {  
            // 2. 只设置一侧填充
            Text("Hello SwiftUI")
                .background(Color.red)
                .padding(.bottom)
            Text("Hello M X")
                .background(Color.blue)
        }
    }
}

效果预览:

注意: 这里只设置了底部填充，与上面的例子不同。

3. 用具体数值来设置 padding

我们可能希望控制对所有边应用了多少填充:

struct ContentView: View {
    var body: some View {
        VStack {  
            // 2. 只设置一侧填充
            Text("Hello SwiftUI")
                .background(Color.red)
                .padding(100)
            Text("Hello M X")
                .background(Color.blue)
        }
    }
}

效果预览:

4. 在视图一侧添加特定数量的填充

我们也可以将这两者结合起来，在视图的一侧添加特定数量的填充：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello SwiftUI")
                .background(Color.red)
                .padding(.bottom, 100)
            Text("Hello M X")
                .background(Color.blue)
        }
    }
}

效果预览: