SwiftUI教程（四）布局详解
2022-07-21 本文已影响0人
iOS之文一
本文主要了解SwiftUI中如何进行布局，在SwiftUI没有坐标系这种说法，而是使用弹性布局，我们使用Stacks进行垂直、水平、深度布局，还可以对视图进行偏移或设置到父视图的某个特定位置。
主要内容：
- SwiftUI的布局
- VStack
- HStack
- ZStack
- LazyStack
- 绝对位置position和相对位置offset
1. SwiftUI的布局
UI通常由多种不同类型的视图组合而成。我们如何对他们进行分组以及布局定位？此时就需要使用stacks。我们可以使用三种堆栈来对UI进行分组:
- HStack - 水平排列其子视图
- VStack - 垂直排列其子视图
- ZStack -根据深度排列子视图(例如从后到前)
在这三种Stack的基础上还有一种懒加载的Stack，叫lazyStack.
除此之外还需要了解绝地位置和相对位置的使用
注意： SwiftUI没有坐标系这种说法，使用弹性布局。类似于HTML的布局方式
2. Stacks的使用
垂直布局方式
var body: some View {
//包括leading、trailing、center
VStack(alignment:.leading, spacing: 20){
Text("orange").background(.orange).font(.caption)
Text("red").background(.red).font(.title)
Text("blue").background(.blue).font(.largeTitle)
Text("yellow").background(.yellow).font(.callout)
}
.border(.gray)
//包括bottom、top、firstTextBaseline、lastTextBaseline、center、
HStack(alignment:.bottom, spacing: 20){
Text("orange").background(.orange).font(.caption)
Text("red").background(.red).font(.title)
Text("blue").background(.blue).font(.largeTitle)
Text("yellow").background(.yellow).font(.callout)
}
.border(.gray)
//包括leading、trailing、bottom、top、bottomLeading、topLeading、bottomtrailing、toptrailing、center
ZStack(alignment: .bottomTrailing){
Text("orange").background(.orange).font(.caption)
Text("red").background(.red).font(.title)
Text("blue").background(.blue).font(.largeTitle)
Text("yellow").background(.yellow).font(.callout)
}
.border(.gray)
}
结果：
结果
说明：
- VStack的Text和button就会垂直分布，Text视图堆叠在Button视图的上方
- HStack的Text和button会水平分布，Text视图堆叠在Button视图的左侧
- ZStack的Text和button会水平分布，Text视图堆叠在Button视图的底部
- 默认情况下一个Stack的两个View之间的间隔很少或没有间隔，但是我们可以通过提供一个参数(spacing)来控制间隔
- VStack默认也会将视图居中对齐。但我们可以使用' alignment '属性进行更改，这里进行左对齐
- HStack的语法与VStack相同，包括指定空格和对齐。ZStack也可以指定对齐方式，但是不能指定空格
3. Stacks的混合使用
我们可以将VStack和HStack视图组合在一起进行复杂的安排创建更多视图。
HStack {
ZStack {
Circle()
.fill(Color.yellow)
Button(action:{
print("button tapped")
}){
Text("Press Me")
}
}
.frame(width: 100.0, height: 100.0)
VStack(alignment: .leading, spacing: 4) { Text("Beginning SwiftUI")
Text("Greg Lim, 2021")
}
}
说明：
- 我们有一个ZStack和一个VStack嵌套在HStack中
- VStack本身包含两个Text视图
- ZStack包含一个圆和一个按钮,这个按钮包含在覆盖在圆的前面
- 我们调用ZStack的frame modeifier来设置它的宽度和高度为100。
- 包装在VStack中的视图默认情况下是在中心对齐。我们可以用对齐参数来改变这一点。
4. LazyStack
懒加载的Stack
ScrollView {
LazyVStack {
ForEach(1...100, id: \.self) {
Text("Cell \($0)").padding()
}
}
}
说明：
- scrollView正常情况下会一次性加载VStack里的数据，比如这里的100个item
- 但是使用lazyVStack后，就只会加载当前页面显示的item
- 需要注意：lazyVStack必须和scrollView搭配使用，还必须有循环创建，否则无法出现懒加载效果
5.ViewBuilder
ViewBuilder是VStack包装的底层实现
以VStack为例进行说明：
@frozen public struct VStack<Content> : View where Content : View {
public static func buildBlock<Content>(_ content: Content) -> Content where Content : View
}
说明：
- Stack 是通过ViewBuilder来实现底层包装View的
- 有两个参数，对齐方式和子视图间距
- 通过buildBlock方法将子视图内容包装成一个视图进行返回
示例：
示例
6. 绝对位置和相对位置
6.1 相对位置offset
查看定义
@inlinable public func offset(x: CGFloat = 0, y: CGFloat = 0) -> some View
}
说明：
- offset可以传入一个CGSize值，也可以传入x和y坐标
- 偏移量不会改变视图的尺寸，只会改变位置
使用：
VStack (spacing:50){
Text("Offset by passing CGSize()")
.border(Color.green)
.offset(CGSize(width: 20, height: 25))
.border(Color.gray)
Text("Offset by passing horizontal & vertical distance")
.border(Color.green)
.offset(x: 20, y: 50)
.border(Color.gray)
}
结果：
结果
说明：
- 灰色边框是原始位置
- offset是将视图以及已经添加的修饰符都进行整体偏移，所以把green也偏移了过去
- 而border是在offset后添加的修饰器，所以仍然在文本的原始位置
- 两种方式仅仅在于方式不一样，效果是完全一样的
6.2 绝对位置position
定义
extension View {
@inlinable public func position(x: CGFloat = 0, y: CGFloat = 0) -> some View
}
使用：
Text("Position by passing a CGPoint()")
.background(Color.blue)
.position(CGPoint(x: 175, y: 100))
.background(Color.green)
Text("Position by passing the x and y coordinates")
.background(Color.blue)
.position(CGPoint(x: 175, y: 100))
.background(Color.green)
结果：
绝对位置
说明：
- position是将视图的中心放置在父视图的特定坐标上。
- 第一个注意的是这里设置的位置是视图的中心位置
- 第二个需要注意的是放置到了父视图的特定坐标上，所以position后设置的颜色充满整个父视图
