SwiftUI - 界面布局知识点

前言

SwiftUI采用的布局方式是和Flutter一样是弹性布局，而不是iOS之前的坐标轴的方式布局，不用准确的设置出位置大小，只需要设置当前视图大小及视图间排布的方式。灵活性增强，布局操作简便，SwiftUI与Flutter布局原理一样，学完一个再学另一个都很方便。

1、VStack 、HStack 、ZStack、LazyVStack、LazyHStack

SwiftUI里的三大容器视图，在布局中是基本的容器类视图，子视图（如Text、Image、Button等）放在它们里面按一定的规则排序。子视图之间默认的spacing=8（即不设置时候间距为8），子视图默认的padding=16（需要设置.padding()才会有），如Text，默认的.padding()=.padding(16)。容器视图的区域为所有子视图所占的矩形空间,如果只有一个子视图，那大小就是子视图的大小。
VStack：纵向布局容器，容器内子视图呈纵向排列，从上往下排列。
HStack：横向布局容器，容器内子视图呈横向排列，从左往右排列。
ZStack：深度布局容器，容器内子视图呈前后排列，从里到外排列（屏幕为参照），默认的优先级zIndex=0。

LazyVStack：纵向布局容器，容器内子视图呈纵向排列，从上往下排列，LazyVStack特点是仅在需要时创建，如果容器子视图太多，超时屏幕太多，可以使用它节省内存。
LazyHStack：横向布局容器，容器内子视图呈横向排列，从左往右排列，LazyHStack特点是仅在需要时创建，如果容器子视图太多，超时屏幕太多，可以使用它节省内存，只加载屏幕上需要展示的View，当滑动时才去展示更多的View，即触发了懒加载机制，当我们去掉ScrollView后，发现无法触发懒加载。当我们把ForEach替换成用Group包装的多个组后，也不能实现懒加载效果。所以LazyStack想要触发懒加载机制，ScrollView及ForEach缺一不可。

2、Spacer

Spacer()：一个看似透明的视图，在布局中起重要作用，它起一个撑满的作用，比如Hstack中的一个Text想在屏幕左边，那么右边添加一个Spacer即可，Spacer就会将右边剩余部分撑满，Text就会被撑到左边。在Vstack中同样可以控制一个视图在纵向的位置。如果给它设置宽度或者高度，那效果也会不一样。

HStack{
          Text("测试")
          Spacer()
       }
       .padding()
       .background(Color.green)

注意：HStack的背景颜色设置是.background，而不是.backgroundColor，background是在底部新建一个View。而且它与padding的顺序上也是有讲究的，谁在前谁在后效果都是不一样的。不妨可以试试看。

先调用padding,再调用background，效果如下: