2. SwiftUI学习之_padding1()

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

如果我把.padding(.vertical) 改成.padding(.vertical, 30)呢？之后是咋样呢？ 猜想是上下的距离更加的大了，变成了30 ，我们来看一下啊

企业微信截图_42ab36e6-d98d-45de-9633-e7e3351894eb.png

对比这两个图，明显的看到了，距离更加的大了。

---

那么看一下这个padding可以怎样进行设置?
.padding() 里边啥也不写就是所有的方向都设置

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

我们可以看到这个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

果然和我们猜想的一样！

总结： .padding是在空间的四周进行设置的间距，如果不设定具体的值，哪会有一个默认的距离，如果设置了，则显示设置的值。同时可以根据自己的需要采取不同的方法，对多个方向设置有2方法，一个是使用集合，一个是利用EdgeInsets

问题1： 如何知道padding 是对谁设置的呢？
首先如果是对具体的控件设置的话，大家应该都知道，他们的层级是不一样的，比如下边这样

 Text("888")
     .padding(15)

那么肯定是对Text进行设置的。

企业微信截图_56ed3f95-76e5-4d33-b53c-325f81583588.png

通过上图可以看出，如果是堆栈控件的话，他的padding会跟堆栈是并列的。
第一个 设置了VStack的尾部padding为20
第二个 设置了 HStack的上下padding为50