Adding Padding in SwiftUI View

当谈到SwiftUI布局和界面设计时，Padding（内边距）是一个非常有用的修饰符。Padding可以在视图的周围添加空白间距，以改变视图的边缘和内容之间的距离。

Padding可以应用于任何视图，如文本、图像、容器视图等。它接受一个参数，用于指定要添加的内边距的大小。这个参数可以是具体的数值，也可以是一些预定义的值，如.all（所有边缘）、.horizontal（水平边缘）或.vertical（垂直边缘）。

下面是没有任何padding的示例

我有一个需求，那就是字和边距不要太靠近了。需有要空隙，那么我们今天的主角就出场了，那就是使用padding来完成这个任务。

添加padding之后就是我们想要的效果，padding的默认边距经过我的测试判断是16，

下面的图是我给Blue的背景色添加了四个方向上的边距，padding值是16，对比上下两个图的红色和蓝色的边距几乎是一样的，所以我认定pandding的默认值是16

我们把文字给多点，让两边达到边界

此时我们想让左右边距是16，其他方向边距不变，该如何做了？

我们还是可以改变padding的方向和值来达到目的

你可以设置leading 和 trailing 的值为16

struct PaddingSample: View {
    var body: some View {
        Text("我的心在等待，永远在等待，我的心在等待永远在等待")
            .font(.largeTitle)
            .fontWeight(.semibold)
            .background(Color.blue)
            .padding(.leading, 16)
            .padding(.trailing, 16)
    }
}

又或者使用EdgeInsets函数来设置

struct PaddingSample: View {
    var body: some View {
        Text("我的心在等待，永远在等待，我的心在等待永远在等待")
            .font(.largeTitle)
            .fontWeight(.semibold)
            .background(Color.blue)
            .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
    }
}

下面是一个经常会用到的padding的应用，这是一个很好的例子。结合了padding的很多情况下的用法，打造了一个很棒的页面布局

struct PaddingSample: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("从前慢")
                .font(.largeTitle)
                .fontWeight(.semibold)
                .padding(.bottom, 20)
            
            Text("记得早先少年时, 大家诚诚恳恳, 说一句是一句, 清早上火车站, 长街黑暗无行人, 卖豆浆的小店冒着热气, 从前的日色变得慢, 车马邮件都慢")
        }
        .padding()
        .padding(.vertical, 10)
        .background(
            Color.white
                .cornerRadius(10)
                .shadow(
                    color:Color.black.opacity(0.3),
                    radius: 10,
                    x: 0,
                    y: 10
                )
        )
        .padding(.horizontal, 10)
    }
}

欢迎观看，喜欢就点个关注我吧！