swiftui开发之padding默认值设置详解.docx

第

swiftui开发之padding默认值设置详解

目录正文padding的默认值对某个方向设置padding同时对多个方向设置padding对上下左右4个方向的padding进行精确设置总结

正文

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

使用padding()可以指定Text、Button等视图填充的数值，或者是对一个或多个边设置填充。

下面让我们来看看padding有哪些使用方式。

padding的默认值

使用padding()设置填充时，没有设置具体数值将会使用特定平台给定的默认值。而这个默认值并没有标准值，对于不同的设备，用户的设置等情况，padding的默认值都会有所不同：

如果值为nil，则将应用特定平台指定的或者由系统计算的值用于填充。

来看看具体示例：

importSwiftUI

structTest:View{

varbody:someView{

VStack{

Text(没有默认值的padding)

.padding()

.background(Color.red)

Text(填充值为16的padding)

.padding(16)

.background(Color.blue)

structTest_Previews:PreviewProvider{

staticvarpreviews:someView{

Test()

iphone14pro显示效果(下面示例默认使用iphone14pro显示）：

上图的显示效果中，默认值和16的效果近似，但不代表默认值就是16。

对某个方向设置padding

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

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

importSwiftUI

structTest:View{

varbody:someView{

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)

structTest_Previews:PreviewProvider{

staticvarpreviews:someView{

Test()

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

同时对多个方向设置padding

我们还可以同时对多个方向设置pdding。

importSwiftUI

structTest:View{

varbody:someView{

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)