2. SwiftUI學(xué)習(xí)之_padding1()

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)的距離,如圖所示


企業(yè)微信截圖_bf179d7d-fe77-4b70-8f41-ed0b2520d363.png
企業(yè)微信截圖_bf179d7d-fe77-4b70-8f41-ed0b2520d363.png

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


企業(yè)微信截圖_42ab36e6-d98d-45de-9633-e7e3351894eb.png
企業(yè)微信截圖_42ab36e6-d98d-45de-9633-e7e3351894eb.png

對(duì)比這兩個(gè)圖,明顯的看到了,距離更加的大了。

那么看一下這個(gè)padding可以怎樣進(jìn)行設(shè)置?
.padding() 里邊啥也不寫就是所有的方向都設(shè)置


截屏2021-07-31 下午4.17.08.png
截屏2021-07-31 下午4.17.08.png

我們可以看到這個(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嗎? 我們來看一下效果圖:


企業(yè)微信截圖_2074cce1-5a4a-43d1-87cf-ee49ffc3d723.png
企業(yè)微信截圖_2074cce1-5a4a-43d1-87cf-ee49ffc3d723.png

果然和我們猜想的一樣!

總結(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è)置的。


企業(yè)微信截圖_56ed3f95-76e5-4d33-b53c-325f81583588.png
企業(yè)微信截圖_56ed3f95-76e5-4d33-b53c-325f81583588.png

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容