padding 也是填充的意思,但是他是以他所修飾的控件為主體的,可以理解成是圍繞著這個(gè)控件的周圍的距離,這個(gè)距離你可以進(jìn)行設(shè)置值,下邊來看一下有哪些參數(shù)可以設(shè)置
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 所有,四個(gè)方向
public static let horizontal: Edge.Set 水平方向 /頭+尾/左+右
public static let vertical: Edge.Set 垂直方向/上+下
所有的方向都可以不設(shè)置值,只寫上方向,它會(huì)自動(dòng)分配一個(gè)默認(rèn)的距離,這個(gè)距離是多少,暫時(shí)我還沒有查資料。
下邊設(shè)置幾個(gè)典型的來簡(jiǎn)單的分析一下:
VStack {
Text("文本填充在底部邊緣。")
.padding(.vertical)
.border(Color.gray)
Text("未填充的文本")
.border(Color.red)
}
可以看到這個(gè)上邊是設(shè)置了 填充方向是豎直方向,那么會(huì)默認(rèn)分配一個(gè)默認(rèn)的距離,如圖所示

如果我把.padding(.vertical) 改成.padding(.vertical, 30)呢?之后是咋樣呢? 猜想是上下的距離更加的大了,變成了30 ,我們來看一下啊

對(duì)比這兩個(gè)圖,明顯的看到了,距離更加的大了。
那么看一下這個(gè)padding可以怎樣進(jìn)行設(shè)置?
.padding() 里邊啥也不寫就是所有的方向都設(shè)置

我們可以看到這個(gè)padding有 4個(gè)方法,可以進(jìn)行使用。
第1個(gè),第3個(gè)就是對(duì)所有的方向進(jìn)行設(shè)置的,第1個(gè)是沒有參數(shù)的,第3個(gè)是有距離長(zhǎng)度參數(shù)的。
第2個(gè)是傳入的參數(shù)是EdgeInsets ,可以同時(shí)對(duì)四個(gè)方向進(jìn)行設(shè)置,當(dāng)然用不到的也可以設(shè)置成0
第4個(gè)是出傳入的是個(gè)數(shù)組,也就是方向的集合
舉個(gè)例子:
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)
}
最后得到的效果是疊加的,第一次 給上設(shè)置10 ,給左邊設(shè)置50 ;第二次給左右各設(shè)置了10
那么最后的效果是:上10 左 60 右10 下0嗎? 我們來看一下效果圖:

果然和我們猜想的一樣!
總結(jié): .padding是在空間的四周進(jìn)行設(shè)置的間距,如果不設(shè)定具體的值,哪會(huì)有一個(gè)默認(rèn)的距離,如果設(shè)置了,則顯示設(shè)置的值。同時(shí)可以根據(jù)自己的需要采取不同的方法,對(duì)多個(gè)方向設(shè)置有2方法,一個(gè)是使用集合,一個(gè)是利用EdgeInsets
問題1: 如何知道padding 是對(duì)誰設(shè)置的呢?
首先如果是對(duì)具體的控件設(shè)置的話,大家應(yīng)該都知道,他們的層級(jí)是不一樣的,比如下邊這樣
Text("888")
.padding(15)
那么肯定是對(duì)Text進(jìn)行設(shè)置的。

通過上圖可以看出,如果是堆??丶脑挘膒adding會(huì)跟堆棧是并列的。
第一個(gè) 設(shè)置了VStack的尾部padding為20
第二個(gè) 設(shè)置了 HStack的上下padding為50