swiftui开发之旅-一文详解 padding

文章收录于专栏【swiftui 开发之旅】，一个前端的 swiftui 开发之旅，欢迎关注。

swiftui 中的 padding 用于设置视图的填充。

运用 padding() 能够指定 Text、Button 等视图填充的数值，或许是对一个或多个边设置填充。

下面让咱们来看看 padding 有哪些运用方法。

padding 的默许值

运用 padding() 设置填充时，没有设置详细数值将会运用特定渠道给定的默许值。而这个默许值并没有标准值，对于不同的设备，用户的设置等状况，padding 的默许值都会有所不同：

如果值为 nil，则将运用特定渠道指定的或许由体系核算的值用于填充。

来看看详细示例：

import SwiftUI
struct Test: View {
    var body: some View {
        VStack{
            Text("没有默许值的padding")
                .padding()
                .background(Color.red)
            Text("填充值为16的padding")
                .padding(16)
                .background(Color.blue)
        }
    }
}
struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

iphone14 pro 显现作用(下面示例默许运用 iphone14 pro 显现）：

上图的显现作用中，默许值和 16 的作用近似，但不代表默许值就是 16。

对某个方向设置 padding

padding 能够对上下左右 4 个方向单独设置填充。

• top：上
• bottom：下
• leading：左
• trailing：右

import SwiftUI
struct Test: View {
    var body: some View {
        VStack{
            Text("上padding")
        .padding(.top, 20) // 文字顶部设置 20 像素的填充
        .border(Color.gray)
      Text("下padding")
        .padding(.bottom, 20)
        .border(Color.gray)
      Text("左padding")
        .padding(.leading, 20)
        .border(Color.gray)
      Text("右padding")
        .padding(.trailing, 20)
        .border(Color.gray)
     // 一致设置 16 像素的填充
      Text("填充值为16的padding")
        .padding(16)
        .border(Color.gray)
        }
    }
}
struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

注意：如果在设置某个方向的 padding 时没有给定详细数值，将会运用体系默许值：padding(.top)。

同时对多个方向设置 padding

咱们还能够同时对多个方向设置 pdding。

import SwiftUI
struct Test: View {
    var body: some View {
        VStack{
      Text("上下padding")
        .padding([.top, .bottom], 20)
        .border(Color.gray)
      Text("上下左padding")
        .padding([.top, .bottom, .leading], 20)
        .border(Color.gray)
      Text("左右padding")
        .padding([.leading, .trailing], 20)
        .border(Color.gray)
      Text("左右下padding")
        .padding([.bottom, .leading, .trailing], 20)
        .border(Color.gray)
      Text("水平padding")
        .padding(.horizontal, 20)
        .border(Color.gray)
      Text("笔直padding")
        .padding(.vertical, 20)
        .border(Color.gray)
      Text("填充值为16的padding")
        .padding(16)
        .border(Color.gray)
    }
    }
}
struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

对上下左右4个方向的 padding 进行准确设置

import SwiftUI
struct Test: View {
    var body: some View {
        VStack{
            Text("准确操控4个方向的padding")
        .padding(EdgeInsets(top: 10, leading: 20, bottom: 30, trailing: 40))
        .border(Color.gray)
      Text("填充值为16的padding")
        .padding(16)
        .border(Color.gray)
    }
    }
}
struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

总结

咱们学会了 padding 的各个方向的设置，给你的布局加点 padding，对用户体验会愈加友好哦。

这是 swiftui 开发之旅专栏的文章，是 swiftui 开发学习的经验总结及实用技巧分享，欢迎关注该专栏，会坚持输出。同时欢迎关注我的个人公众号 @JSHub：提供最新的开发信息速报，优质的技术干货推荐。或是检查我的个人博客：Devcursor

点赞：如果有收获和协助，请点个赞支持一下！

保藏：欢迎保藏文章，随时检查！

评论：欢迎评论交流学习，共同进步！