padding 也是填充的意思,但是他是以他所修饰的控件为主体的,可以理解成是围绕着这个控件的周围的距离,这个距离你可以进行设置值,下边来看一下有哪些参数可以设置
public static let top: Edge.Set 上
public static let leading: Edge.Set 头/左
public static let bottom: Edge.Set 下
public static let trailing: Edge.Set 尾/右
public static let all: Edge.Set 所有,四个方向
public static let horizontal: Edge.Set 水平方向 /头+尾/左+右
public static let vertical: Edge.Set 垂直方向/上+下
所有的方向都可以不设置值,只写上方向,它会自动分配一个默认的距离,这个距离是多少,暂时我还没有查资料。
下边设置几个典型的来简单的分析一下:
VStack {
Text("文本填充在底部边缘。")
.padding(.vertical)
.border(Color.gray)
Text("未填充的文本")
.border(Color.red)
}
可以看到这个上边是设置了 填充方向是竖直方向,那么会默认分配一个默认的距离,如图所示
![企业微信截图_bf179d7d-fe77-4b70-8f41-ed0b2520d363.png](https://upload-images.jianshu.io/upload_images/4579246-7ccc8f0f7557dd84.png&originHeight=756&originWidth=1228&originalType=binary&ratio=1&size=1053466&status=done&style=none&taskId=u383f4b14-e45b-4d79-b369-da0b5408ecf&width=307?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如果我把.padding(.vertical) 改成.padding(.vertical, 30)呢?之后是咋样呢? 猜想是上下的距离更加的大了,变成了30 ,我们来看一下啊
![企业微信截图_42ab36e6-d98d-45de-9633-e7e3351894eb.png](https://upload-images.jianshu.io/upload_images/4579246-9dca49e283365a8e.png&originHeight=752&originWidth=1226&originalType=binary&ratio=1&size=1051559&status=done&style=none&taskId=u108c1327-9ce9-4d80-b1bf-ed0802e3ff6&width=307?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
对比这两个图,明显的看到了,距离更加的大了。
那么看一下这个padding可以怎样进行设置?
.padding() 里边啥也不写就是所有的方向都设置
![截屏2021-07-31 下午4.17.08.png](https://upload-images.jianshu.io/upload_images/4579246-771c1623bcf1d6b5.png&originHeight=410&originWidth=764&originalType=binary&ratio=1&size=113825&status=done&style=none&taskId=u7616922c-e993-4b56-89ab-832cd5dba00&width=382?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
我们可以看到这个padding有 4个方法,可以进行使用。
第1个,第3个就是对所有的方向进行设置的,第1个是没有参数的,第3个是有距离长度参数的。
第2个是传入的参数是EdgeInsets ,可以同时对四个方向进行设置,当然用不到的也可以设置成0
第4个是出传入的是个数组,也就是方向的集合
举个例子:
VStack {
Text("文本填充在底部边缘。")
.padding(EdgeInsets(top: 10, leading: 50, bottom: 0, trailing: 0)) //方法2
.padding([.leading,.trailing], 10) //方法4
.border(Color.gray)
Text("未填充的文本")
.border(Color.red)
}
最后得到的效果是叠加的,第一次 给上设置10 ,给左边设置50 ;第二次给左右各设置了10
那么最后的效果是:上10 左 60 右10 下0吗? 我们来看一下效果图:
![企业微信截图_2074cce1-5a4a-43d1-87cf-ee49ffc3d723.png](https://upload-images.jianshu.io/upload_images/4579246-fe1e943ec4bd753c.png&originHeight=744&originWidth=1222&originalType=binary&ratio=1&size=1024726&status=done&style=none&taskId=ub01f0ca3-f09c-412a-a473-83c1be5150a&width=306?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
果然和我们猜想的一样!
总结: .padding是在空间的四周进行设置的间距,如果不设定具体的值,哪会有一个默认的距离,如果设置了,则显示设置的值。同时可以根据自己的需要采取不同的方法,对多个方向设置有2方法,一个是使用集合,一个是利用EdgeInsets
问题1: 如何知道padding 是对谁设置的呢?
首先如果是对具体的控件设置的话,大家应该都知道,他们的层级是不一样的,比如下边这样
Text("888")
.padding(15)
那么肯定是对Text进行设置的。
![企业微信截图_56ed3f95-76e5-4d33-b53c-325f81583588.png](https://upload-images.jianshu.io/upload_images/4579246-f0eea198e5bef77c.png&originHeight=1562&originWidth=2912&originalType=binary&ratio=1&size=765906&status=done&style=none&taskId=u20e03efc-b8e3-46b6-963a-ad866bd3568?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
通过上图可以看出,如果是堆栈控件的话,他的padding会跟堆栈是并列的。
第一个 设置了VStack的尾部padding为20
第二个 设置了 HStack的上下padding为50