SwiftUI调整视图内容间距的padding

在 SwiftUI 中，padding 是一个用于添加视图与其周围内容之间间距的修饰符。它可以在指定方向或所有方向上应用间距。

基本语法

.viewModifier()
.padding() // 默认会应用 16 点的间距，四面都有
.padding(EdgeInsets) // 自定义间距
.padding(具体方向, 大小) // 指定方向和大小

示例详解

1、默认的 padding

为视图添加默认的内边距（16 点）：

Text("Hello, SwiftUI!")
    .padding()
    .background(Color.gray)

效果：Text 周围会有均匀的 16 点间距。

2、自定义间距

为所有边应用相同的间距：

Text("Custom Padding")
    .padding(20) // 四边均为 20 点
    .background(Color.blue)

3、指定方向的 padding

可以单独指定边或方向，例如顶部、底部、左、右等：

Text("Top Padding Only")
    .padding(.top, 8)         // 顶部 8
    .padding(.bottom, 16)      // 底部 16
    .padding(.leading, 24)    // 左侧 24
    .padding(.trailing, 32)   // 右侧 32
    .background(Color.gray)   // 添加背景颜色，便于观察效果

通过 .top、.bottom、.leading、.trailing分别设置上下左右的间距。

Text("Hello, World!")
    .padding(.horizontal, 10) // 左右都为 10
    .padding(.vertical, 20)   // 上下都为 20
    .background(Color.red)

通过 .horizontal 设置水平间距，通过 .vertical 设置垂直边距。

4、使用 EdgeInsets

通过 EdgeInsets 为不同边设置不同的间距：

Text("EdgeInsets Padding")
    .padding(EdgeInsets(top: 10, leading: 20, bottom: 30, trailing: 40))
    .background(Color.green)

效果：

上：10 点

左：20 点

下：30 点

右：40 点

常见用例

1、调整内边距

Button("Click Me") {
    print("Button Clicked")
}
.padding(12)
.foregroundColor(Color.white)
.background(Color.blue)
.cornerRadius(8)

2、响应式布局

GeometryReader { geometry in
    VStack {
        Text("Hello, SwiftUI!")
            .padding(geometry.size.width > 400 ? 50 : 20)
            .background(.purple)
    }
    .frame(width: geometry.size.width, height: geometry.size.height)
}

padding 是 SwiftUI 中一个非常灵活且强大的修饰符，用于优化视图的布局和间距。