doc: Modify Swift && SwiftUI (#852)

This commit is contained in:
Zhang 2024-11-12 23:41:59 +08:00 committed by GitHub
parent 27c3a9578f
commit 5cb04086b1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 56 additions and 71 deletions

View File

@ -11,7 +11,7 @@ Swift 备忘清单
```swift ```swift
var score = 0 // 变量 var score = 0 // 变量
let pi = 3.14 // 常 let pi = 3.14 // 常
var greeting = "Hello" var greeting = "Hello"
var numberOfToys = 8 var numberOfToys = 8
@ -169,7 +169,7 @@ numberOfToys += 1
print(numberOfToys) // 打印“9” print(numberOfToys) // 打印“9”
``` ```
### 常 ### 常量声明
常量用 `let` 声明: 常量用 `let` 声明:
@ -187,7 +187,7 @@ let numberOfToys: Int = 8
let isMorning: Bool = true let isMorning: Bool = true
``` ```
常量是不可变的。它们的值不能改变: 常量 `let` 一旦设定,在程序运行时就无法改变其值:
```swift ```swift
let numberOfToys: Int = 8 let numberOfToys: Int = 8
@ -195,7 +195,7 @@ numberOfToys += 1
// ❌ 错误numberOfToys 不可变 // ❌ 错误numberOfToys 不可变
``` ```
### 计算变量get 和 set ### 计算属性get 和 set
<!--rehype:wrap-class=row-span-3--> <!--rehype:wrap-class=row-span-3-->
```swift ```swift
@ -581,6 +581,8 @@ for char in "supercalifragilistice" {
// 打印: r // 打印: r
``` ```
`break` 关键字中断当前循环
### 使用下划线 ### 使用下划线
```swift ```swift

View File

@ -233,23 +233,9 @@ Map(coordinateRegion: $region,
Layout(布局) Layout(布局)
---- ----
### Background
将图像用作背景
```swift
Text("Hello World")
.font(.largeTitle)
.background(
Image("hello_world")
.resizable()
.frame(width: 100, height: 100)
)
```
### VStack ### VStack
以垂直线排列其子项的视图 `VStack``垂直` 堆栈布局,用于将子视图垂直排列。默认将子视图从上到下排列
```swift ```swift
VStack (alignment: .center, spacing: 20){ VStack (alignment: .center, spacing: 20){
@ -259,13 +245,11 @@ VStack (alignment: .center, spacing: 20){
} }
``` ```
创建静态可滚动列表。文档 - [VStack](https://developer.apple.com/documentation/swiftui/vstack) 文档 - [VStack](https://developer.apple.com/documentation/swiftui/vstack)
### HStack ### HStack
将其子级排列在一条水平线上的视图。 `HStack``水平` 堆栈布局,用于将子视图水平排列。默认将子视图从左到右排列
创建静态可滚动列表
```swift ```swift
HStack (alignment: .center, spacing: 20){ HStack (alignment: .center, spacing: 20){
@ -277,9 +261,22 @@ HStack (alignment: .center, spacing: 20){
文档 - [HStack](https://developer.apple.com/documentation/swiftui/hstack) 文档 - [HStack](https://developer.apple.com/documentation/swiftui/hstack)
### LazyVStack ### ZStack
`iOS 14` 一种视图,将其子级排列在垂直增长的线中,仅在需要时创建项。 `ZStack``层叠` 堆栈布局,用于将子视图重叠在一起。按照添加的顺序从下到上排列子视图,即先添加的视图会在下面,后添加的视图会覆盖在上面
```swift
ZStack {
Text("Hello")
Text("World")
}
```
文档 - [ZStack](https://developer.apple.com/documentation/swiftui/zstack)
### 懒加载 Lazy
`iOS 14.0` 之后新增的视图,仅在需要时才会创建和渲染
```swift ```swift
ScrollView { ScrollView {
@ -291,58 +288,30 @@ ScrollView {
} }
``` ```
文档 - [LazyVStack](https://developer.apple.com/documentation/swiftui/lazyvstack) - 懒加载:只有当子视图进入可视区域时,才会被创建和渲染
- 自适应:子视图的宽高可以自适应
- 性能优化:适用于大量子视图或动态内容的场景
<!--rehype:className=style-round-->
### LazyHStack - 文档 - [LazyVStack](https://developer.apple.com/documentation/swiftui/lazyvstack)
<!--rehype:wrap-class=col-span-2--> - 文档 - [LazyHStack](https://developer.apple.com/documentation/swiftui/lazyhstack)
将子项排列在水平增长的线中的视图,仅在需要时创建项。
```swift
ScrollView(.horizontal) {
LazyHStack(alignment: .center, spacing: 20) {
ForEach(1...100, id: \.self) {
Text("Column \($0)")
}
}
}
```
文档 - [LazyHStack](https://developer.apple.com/documentation/swiftui/lazyhstack)
### ZStack
覆盖其子项的视图,使子项在两个轴上对齐。
```swift
ZStack {
Text("Hello")
.padding(10)
.background(Color.red)
.opacity(0.8)
Text("World")
.padding(20)
.background(Color.red)
.offset(x: 0, y: 40)
}
```
文档 - [ZStack](https://developer.apple.com/documentation/swiftui/zstack)
### LazyVGrid ### LazyVGrid
<!--rehype:wrap-class=col-span-2-->
容器视图,将其子视图排列在垂直增长的网格中,仅在需要时创建项目 容器视图,将其子视图排列在`垂直`增长的网格中,仅在需要时创建项目
```swift ```swift
var columns: [GridItem] = Array(repeating: .init(.fixed(20)), count: 5) var columns: [GridItem] =
Array(
repeating: .init(.fixed(20)), count: 5
)
ScrollView { ScrollView {
LazyVGrid(columns: columns) { LazyVGrid(columns: columns) {
ForEach((0...100), id: \.self) { ForEach((0...100), id: \.self) {
Text("\($0)").background(Color.pink) Text("\($0)").background(Color.pink)
}
} }
}
} }
``` ```
@ -350,7 +319,7 @@ ScrollView {
### LazyHGrid ### LazyHGrid
一种容器视图,将其子视图排列在水平增长的网格中,仅在需要时创建项目 容器视图,将其子视图排列在`水平`增长的网格中,仅在需要时创建项目
```swift ```swift
var rows: [GridItem] = var rows: [GridItem] =
@ -360,8 +329,8 @@ var rows: [GridItem] =
ScrollView(.horizontal) { ScrollView(.horizontal) {
LazyHGrid(rows: rows, alignment: .top) { LazyHGrid(rows: rows, alignment: .top) {
ForEach((0...100), id: \.self) { ForEach((0...100), id: \.self) {
Text("\($0)").background(Color.pink) Text("\($0)").background(Color.pink)
} }
} }
} }
@ -397,6 +366,20 @@ HStack {
文档 - [Divider](https://developer.apple.com/documentation/swiftui/divider) 文档 - [Divider](https://developer.apple.com/documentation/swiftui/divider)
### Background
将图像用作背景
```swift
Text("Hello World")
.font(.largeTitle)
.background(
Image("hello_world")
.resizable()
.frame(width: 100, height: 100)
)
```
Input(输入) Input(输入)
--- ---