你可以理解为有棉花填充在Spacer()所在位置,棉花的量很大,足以把所有的空间都填满。
以HStack为例,如果HStack不使用Spacer()的话,内容是居中显示的,其实大小只有内容的大小而已
HStack {``
Text("name:")
Text("Alice")
}
前后都不加的话,他的居中对齐的方式
![企业微信截图_2fb54100-99a3-4bdb-b01c-0c0f669f1574.png](https://upload-images.jianshu.io/upload_images/4579246-643c2cd0e08d1336.png&originHeight=744&originWidth=1230&originalType=binary&ratio=1&size=968156&status=done&style=none&taskId=u071bdc6a-34ea-4b2a-9779-f26f5b884ca&width=308?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
企业微信截图_2fb54100-99a3-4bdb-b01c-0c0f669f1574.png
HStack {
Spacer()
Text("name:")
Text("Alice")
}
前边加上的话,前边的位置就会被填充
![企业微信截图_62bccf8f-7143-4426-bf14-1507c1f452fd.png](https://upload-images.jianshu.io/upload_images/4579246-162f82db01766eae.png&originHeight=744&originWidth=1224&originalType=binary&ratio=1&size=954149&status=done&style=none&taskId=u94ef452d-cf5e-4407-bf28-3e2bceae86b&width=306?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
企业微信截图_62bccf8f-7143-4426-bf14-1507c1f452fd.png
HStack {
Spacer()
Text("name:")
Text("Alice")
Spacer()
}
前后都加上,效果就跟第一张图一样,但是实际上是充满了整个控件,而图一是只是居中了,并不是全部的控件空间
![企业微信截图_2fb54100-99a3-4bdb-b01c-0c0f669f1574.png](https://upload-images.jianshu.io/upload_images/4579246-e6512d9214fef77b.png&originHeight=744&originWidth=1230&originalType=binary&ratio=1&size=968156&status=done&style=none&taskId=u071bdc6a-34ea-4b2a-9779-f26f5b884ca&width=308?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
企业微信截图_2fb54100-99a3-4bdb-b01c-0c0f669f1574.png
那这样的话:我们就可以猜想出来,如果左、右、中间都有Spacer()那么就会左边有空白,右边有空白,中间有空白,那么我们来验证一下
HStack {
Spacer()
Text("name:")
Spacer()
Text("Alice")
Spacer()
}
![企业微信截图_51f2e028-5e9d-4168-80af-7df8180c9e7e.png](https://upload-images.jianshu.io/upload_images/4579246-e56dacc9a7c225ac.png&originHeight=744&originWidth=1220&originalType=binary&ratio=1&size=955197&status=done&style=none&taskId=u853edd51-1cc6-41fd-ba53-3da110af350&width=305?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
企业微信截图_51f2e028-5e9d-4168-80af-7df8180c9e7e.png
果然是这样,到这里我们就知道了,其实Spacer()存在的意义就是帮我们把空间占满,就可以想象一下有很多的棉花在这里哈哈。