Appearance

布局 ​

VStack 垂直排列 ​

文档参考 VStack

swift
VStack {
    Rectangle()
        .fill(.red)
    Rectangle()
        .fill(.blue)
    Rectangle()
        .fill(.orange)
}
.padding()

VStack 方法 alignment 参数可控制对齐方式

样式说明
.leading左对齐
.trailing右对齐
.center剧中

HStack 水平排列 ​

文档参考 HStack

swift
HStack {
    Rectangle()
        .fill(.red)
    Rectangle()
        .fill(.blue)
    Rectangle()
        .fill(.orange)
}
.padding()

HStack 方法 alignment 参数可控制对齐方式

样式说明
.top顶部对齐
.bottom底部对齐

HStack 方法 spacing 参数可控制元素的间距

swift
HStack(alignment: .bottom, spacing: 0) {
    Rectangle()
        .fill(.red)
        .frame(width: 200,height: 120)
    Rectangle()
        .fill(.blue)
        .frame(width: 100,height: 180)
    Rectangle()
        .fill(.orange)
        .frame(width: 150,height: 100)
}

对其方式

swift
VStack(alignment: .leading) {
    Rectangle()
        .fill(.red)
        .frame(width: 200,height: 100)
    Rectangle()
        .fill(.blue)
        .frame(width: 100,height: 100)
    Rectangle()
        .fill(.orange)
        .frame(width: 150,height: 100)
}
.padding()

ZStack 叠加状态 ​

叠加后面的元素会覆盖前面的元素，文档参考ZStack

swift
ZStack {
    Rectangle()
        .fill(.red)
    Rectangle()
        .fill(.blue)
    Rectangle()
        .fill(.orange)
}
.padding()

堆栈案例

swift
// 竖直堆栈
VStack {
    // 水平堆栈
    HStack {
        Rectangle().fill(.red)
        Rectangle().fill(.blue)
        Rectangle().fill(.orange)
    }
    // 竖直堆栈
    VStack {
        Rectangle().fill(.red)
        Rectangle().fill(.blue)
        Rectangle().fill(.orange)
    }
    // 叠加堆栈
    ZStack {
        Rectangle().fill(.red)
        Rectangle().fill(.blue).frame(width: 300, height: 200)
        Rectangle().fill(.orange).frame(width: 100, height: 100)
    }
}

Spacer 间隔 ​

用于撑开剩余空间，文档参考 Spacer

垂直布局

给每个元素之间添加 Spacer 的垂直布局方式：

swift
VStack {
    Spacer()
    Rectangle()
        .fill(.red)
        .frame(width: 100, height: 90)
    Spacer()
    Rectangle()
        .fill(.blue)
        .frame(width: 130,height: 120)
    Spacer()
    Rectangle()
        .fill(.yellow)
        .frame(width: 70,height: 140)
    Spacer()
}
.frame(width: 300,height: 600)
.background(.black)

类似 css 的：

css
view {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

水平布局

swift
HStack {
    Spacer()
    Rectangle()
        .fill(.red)
        .frame(width: 100, height: 90)
    Spacer()
    Rectangle()
        .fill(.blue)
        .frame(width: 130,height: 120)
    Spacer()
    Rectangle()
        .fill(.yellow)
        .frame(width: 70,height: 140)
    Spacer()
}
.frame(width: .infinity,height: 600)
.background(.black)

类似 css 的：

css
view {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ScrollView 滚动视图 ​

官方文档参考 ScrollView

ScrollView 可控制元素的滚动，可以水平或者垂直滚动

通过 .horizontal 和 .vertical 配置横向滚动和纵向滚动

swift
ScrollView(.horizontal) {
    HStack {
        ForEach(0..<100) {index in
            Text("列表\(index)")
        }
    }
}

ScrollView(.vertical) {
    ForEach(0..<100) {index in
        Text("列表\(index)")
    }
}
参数说明
showsIndicators是否显示滚动条滑块

LazyVStack 惰性堆栈 ​

文档参考 LazyVStack

使用 LazyVStack 渲染的堆栈，只会渲染可见区域内部的元素，未显示的不会渲染，已经渲染过但是未在视口内的元素将会销毁。

swift
struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(1..<500){index in
                    Text("文本\(index)")
                }
            }
        }
    }
}

#Preview {
    ContentView()
}

Section 分节 ​

文档参考 Section

Section 算是一种文案布局排榜的一个标签

swift
Section {
    Text("待会撒娇大黄金时代哈就睡得好撒娇的哈手机的哈手机的哈手机的哈记得回家")
} header: {
    Text("标题")
}

LazyVGrid 惰性网格 ​

文档参考 LazyVGrid

类似 css 中的 grid 布局

swift
ScrollView {
    LazyVGrid (columns: [GridItem(.fixed(100)),
                          GridItem(.fixed(100)),
                          GridItem(.fixed(100))
                        ],
                alignment: .center,
                content:{
        ForEach(0..<200){index in
            Text("Grid\(index)")
                .padding()
                .background(.red)
        }
    })
}

导航主要用到的两个组件是 NavigationStack 和 NavigationLink

WARNING

NavigationView 现已弃用！

使用 NavigationStack 包裹的页面可以进行路由跳转，可以从屏幕左侧向右滑动返回上一层。

配置：

配置说明
.navigationBarHidden(true)隐藏导航栏
.ignoresSafeArea(.all)忽略安全区域边缘
.toolbar(.hidden)隐藏导航栏上的工具栏