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