1、VStack（垂直布局）（对应还有LazyVStack懒加载垂直布局，iOS 14.0才可使用）
VStack 会一次性渲染所有视图，无论它们是在屏幕上还是屏幕外。 当您有少量子视图或不希望“懒加载”延迟渲染时，请使用常规 VStack。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(
alignment: .leading,
spacing: 10
) {
ForEach(
0...10,
id: \.self
) {
Text("Item \($0)")
.background(Color.blue)
}
}
}}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
alignment：对接方式，左/中/右
extension HorizontalAlignment {
/// A guide marking the leading edge of the view.
public static let leading: HorizontalAlignment
/// A guide marking the horizontal center of the view.
public static let center: HorizontalAlignment
/// A guide marking the trailing edge of the view.
public static let trailing: HorizontalAlignment
}
spacing：间距
截屏2021-12-26 23.32.42.png
2、HStack（水平布局）（对应还有LazyHStack懒加载水平布局，iOS 14.0才可使用）
HStack 会一次性渲染所有视图，无论它们是在屏幕上还是屏幕外。 当您有少量子视图或不希望“懒加载”延迟渲染时，请使用常规 HStack。
var body: some View {
HStack(
alignment: .top,
spacing: 10
) {
ForEach(
1...5,
id: \.self
) {
Text("Item \($0)")
}
}
}
截屏2021-12-26 23.16.05.png
3、ZStack（层叠布局）
ZStack 为每个连续的子视图分配比前一个更高的 z 轴值，这意味着后面的子视图出现在前面的子视图的“顶部”。
下面的示例创建一个 100 x 100 点的 ZStack 矩形视图，填充六种颜色之一，将每个连续的子视图偏移 10 点，使它们不会完全重叠：
let colors: [Color] =
[.red, .orange, .yellow, .green, .blue, .purple]
var body: some View {
ZStack {
ForEach(0..<colors.count) {
Rectangle()
.fill(colors[$0])
.frame(width: 100, height: 100)
.offset(x: CGFloat($0) * 10.0,
y: CGFloat($0) * 10.0)
}
}
}
截屏2021-12-26 23.19.59.png
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
Rectangle()
.fill(Color.red)
.frame(width:300, height:300)
.zIndex(0)
Rectangle()
.fill(Color.blue)
.frame(width:200, height:200)
Rectangle()
.fill(Color.yellow)
.frame(width:100, height:100)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
截屏2021-12-26 23.27.56.png
zIndex：层叠优先级，从大到小1-0
4、Spacer （填充布局）
一个灵活的填充空间布局，垂直/水平填充，默认填充满剩余所有空间，也可以指定填充的宽度或高度
-
4-1 未填充前的水平布局
截屏2021-12-27 23.26.59.png
- 4-2 填充后的水平布局（垂直布局一样的效果）
import SwiftUI
struct ContentView: View {
var body: some View {
HStack(
alignment: .top,
spacing: 10
) {
Text("Item 1")
.background(Color.purple)
Spacer()
Text("Item 2")
.background(Color.purple)
Spacer()
Text("Item 3")
.background(Color.purple)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
截屏2021-12-27 23.28.33.png
- 4-3 填充后的水平布局（垂直布局一样的效果）
import SwiftUI
struct ContentView: View {
var body: some View {
HStack(
alignment: .top,
spacing: 10
) {
Spacer()
Text("Item 1")
.background(Color.purple)
Spacer()
Text("Item 2")
.background(Color.purple)
Spacer()
Text("Item 3")
.background(Color.purple)
Spacer()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
截屏2021-12-27 23.28.45.png
minLength：设置填充最小宽度/高度
5、ScrollView
滚动视图在可滚动内容区域内显示其内容。 当用户执行适合平台的滚动手势时，滚动视图会调整底层内容的可见部分。 ScrollView 可以水平、垂直或同时滚动，但不提供缩放功能。（一般配合HStack、VStack等布局使用）
在以下示例中，ScrollView 允许用户滚动包含 100 个文本视图的 VStack。 列表后的图像显示了右侧滚动视图的临时可见滚动条； 您可以使用 ScrollView 初始值设定项的 showsIndicators 参数禁用它。
var body: some View {
ScrollView {
VStack(alignment: .leading) {
ForEach(0..<100) {
Text("Row \($0)")
}
}
}
}
截屏2021-12-27 23.39.15.png
Axis.set: 设置滚动方向/水平/垂直
showsIndicators：是否显示滚动指示器
6、GeometryReader（相对布局）
一个容器视图，将其内容定义为它自己的大小和坐标空间的函数。可以获取到视图的大小和坐标
import SwiftUI
struct ContentView : View {
var body: some View {
VStack {
Text("Hello There!").background(Color.orange)
MyRectangle()
}.frame(width: 150, height: 100).border(Color.yellow)
}
}
struct MyRectangle: View {
var body: some View {
GeometryReader { geometry in
Rectangle()
.path(in: CGRect(x: geometry.size.width + 5,
y: 0,
width: geometry.size.width/2,
height: geometry.size.height))
.fill(Color.pink)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
截屏2021-12-27 23.54.37.png
7、ViewBuilder
通常使用 ViewBuilder 作为子视图生成闭包参数的参数属性，允许这些闭包提供多个子视图。 例如，以下CustomView接受一个通过视图构建器生成一个或多个视图的闭包。(通常用来自定义View、dialog、toast等)
import SwiftUI
struct ContentView : View {
var body: some View {
CustomView{
Text("Itme 1")
Text("Itme 2")
Text("Itme 3")
}
}
}
struct CustomView<Content>:View where Content:View {
private let content:Content
init(@ViewBuilder content:() -> Content) {
self.content = content()
}
var body: some View{
VStack{
content
.padding()
}
.foregroundColor(.orange)
.background(Color.pink)
.font(.title)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
截屏2021-12-28 00.08.06.png
8、LazyVGrid （懒加载垂直网格布局）（iOS 14.0才可使用）
控件显示到屏幕里才会加载（性能会有提升）
import SwiftUI
struct ContentView : View {
var body: some View {
let columns: [GridItem] =
Array(repeating: .init(.flexible(), spacing: 0), count: 4)
ScrollView {
LazyVGrid(columns: columns) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
.font(.largeTitle)
.background(Color.blue)
}
}.font(.largeTitle)
}
.padding()
}
}
截屏2021-12-28 21.46.41.png
9、LazyHGrid （懒加载水平网格布局）（iOS 14.0才可使用）
控件显示到屏幕里才会加载
import SwiftUI
struct ContentView : View {
var body: some View {
let rows: [GridItem] =
Array(repeating: .init(.fixed(50)), count: 2)
ScrollView(.horizontal) {
LazyHGrid(rows: rows, alignment: .top) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
.font(.largeTitle)
.background(Color.blue)
}
}
}
.padding()
}
}
截屏2021-12-28 21.45.07.png
