@@ -233,23 +233,9 @@ Map(coordinateRegion: $region,
233
233
Layout(布局)
234
234
----
235
235
236
- ### Background
237
-
238
- 将图像用作背景
239
-
240
- ``` swift
241
- Text (" Hello World" )
242
- .font (.largeTitle )
243
- .background (
244
- Image (" hello_world" )
245
- .resizable ()
246
- .frame (width : 100 , height : 100 )
247
- )
248
- ```
249
-
250
236
### VStack
251
237
252
- 以垂直线排列其子项的视图
238
+ ` VStack ` 是 ` 垂直 ` 堆栈布局,用于将子视图垂直排列。默认将子视图从上到下排列
253
239
254
240
``` swift
255
241
VStack (alignment : .center , spacing : 20 ){
@@ -259,13 +245,11 @@ VStack (alignment: .center, spacing: 20){
259
245
}
260
246
```
261
247
262
- 创建静态可滚动列表。 文档 - [ VStack] ( https://developer.apple.com/documentation/swiftui/vstack )
248
+ 文档 - [ VStack] ( https://developer.apple.com/documentation/swiftui/vstack )
263
249
264
250
### HStack
265
251
266
- 将其子级排列在一条水平线上的视图。
267
-
268
- 创建静态可滚动列表
252
+ ` HStack ` 是 ` 水平 ` 堆栈布局,用于将子视图水平排列。默认将子视图从左到右排列
269
253
270
254
``` swift
271
255
HStack (alignment : .center , spacing : 20 ){
@@ -277,80 +261,65 @@ HStack (alignment: .center, spacing: 20){
277
261
278
262
文档 - [ HStack] ( https://developer.apple.com/documentation/swiftui/hstack )
279
263
280
- ### LazyVStack
264
+ ### ZStack
281
265
282
- ` iOS 14 ` 一种视图,将其子级排列在垂直增长的线中,仅在需要时创建项。
266
+ ` ZStack ` 是 ` 层叠 ` 堆栈布局,用于将子视图重叠在一起。按照添加的顺序从下到上排列子视图,即先添加的视图会在下面,后添加的视图会覆盖在上面
283
267
284
268
``` swift
285
- ScrollView {
286
- LazyVStack (alignment : .leading ) {
287
- ForEach (1 ... 100 , id : \.self ) {
288
- Text (" Row \( $0 ) " )
289
- }
290
- }
269
+ ZStack {
270
+ Text (" Hello" )
271
+ Text (" World" )
291
272
}
292
273
```
293
274
294
- 文档 - [ LazyVStack ] ( https://developer.apple.com/documentation/swiftui/lazyvstack )
275
+ 文档 - [ ZStack ] ( https://developer.apple.com/documentation/swiftui/zstack )
295
276
296
- ### LazyHStack
297
- <!-- rehype:wrap-class=col-span-2-->
277
+ ### 懒加载 Lazy
298
278
299
- 将子项排列在水平增长的线中的视图,仅在需要时创建项。
279
+ ` iOS 14.0 ` 之后新增的视图,仅在需要时才会创建和渲染
300
280
301
281
``` swift
302
- ScrollView (.horizontal ) {
303
- LazyHStack (alignment : .center , spacing : 20 ) {
304
- ForEach (1 ... 100 , id : \.self ) {
305
- Text (" Column \( $0 ) " )
306
- }
282
+ ScrollView {
283
+ LazyVStack (alignment : .leading ) {
284
+ ForEach (1 ... 100 , id : \.self ) {
285
+ Text (" Row \( $0 ) " )
307
286
}
287
+ }
308
288
}
309
289
```
310
290
311
- 文档 - [ LazyHStack] ( https://developer.apple.com/documentation/swiftui/lazyhstack )
291
+ - 懒加载:只有当子视图进入可视区域时,才会被创建和渲染
292
+ - 自适应:子视图的宽高可以自适应
293
+ - 性能优化:适用于大量子视图或动态内容的场景
294
+ <!-- rehype:className=style-round-->
312
295
313
- ### ZStack
314
-
315
- 覆盖其子项的视图,使子项在两个轴上对齐。
316
-
317
- ``` swift
318
- ZStack {
319
- Text (" Hello" )
320
- .padding (10 )
321
- .background (Color.red )
322
- .opacity (0.8 )
323
- Text (" World" )
324
- .padding (20 )
325
- .background (Color.red )
326
- .offset (x : 0 , y : 40 )
327
- }
328
- ```
329
-
330
- 文档 - [ ZStack] ( https://developer.apple.com/documentation/swiftui/zstack )
296
+ - 文档 - [ LazyVStack] ( https://developer.apple.com/documentation/swiftui/lazyvstack )
297
+ - 文档 - [ LazyHStack] ( https://developer.apple.com/documentation/swiftui/lazyhstack )
331
298
332
299
### LazyVGrid
333
- <!-- rehype:wrap-class=col-span-2-->
334
300
335
- 容器视图,将其子视图排列在垂直增长的网格中 ,仅在需要时创建项目。
301
+ 容器视图,将其子视图排列在 ` 垂直 ` 增长的网格中 ,仅在需要时创建项目
336
302
337
303
``` swift
338
- var columns: [GridItem] = Array (repeating : .init (.fixed (20 )), count : 5 )
304
+ var columns: [GridItem] =
305
+ Array (
306
+ repeating : .init (.fixed (20 )), count : 5
307
+ )
339
308
340
309
ScrollView {
341
- LazyVGrid (columns : columns) {
342
- ForEach ((0 ... 100 ), id : \.self ) {
343
- Text (" \( $0 ) " ).background (Color.pink )
344
- }
310
+ LazyVGrid (columns : columns) {
311
+ ForEach ((0 ... 100 ), id : \.self ) {
312
+ Text (" \( $0 ) " ).background (Color.pink )
345
313
}
314
+ }
346
315
}
347
316
```
348
317
349
318
文档 - [ LazyVGrid] ( https://developer.apple.com/documentation/swiftui/lazyvgrid )
350
319
351
320
### LazyHGrid
352
321
353
- 一种容器视图,将其子视图排列在水平增长的网格中 ,仅在需要时创建项目。
322
+ 容器视图,将其子视图排列在 ` 水平 ` 增长的网格中 ,仅在需要时创建项目
354
323
355
324
``` swift
356
325
var rows: [GridItem] =
@@ -360,8 +329,8 @@ var rows: [GridItem] =
360
329
361
330
ScrollView (.horizontal ) {
362
331
LazyHGrid (rows : rows, alignment : .top ) {
363
- ForEach ((0 ... 100 ), id : \.self ) {
364
- Text (" \( $0 ) " ).background (Color.pink )
332
+ ForEach ((0 ... 100 ), id : \.self ) {
333
+ Text (" \( $0 ) " ).background (Color.pink )
365
334
}
366
335
}
367
336
}
@@ -397,6 +366,20 @@ HStack {
397
366
398
367
文档 - [ Divider] ( https://developer.apple.com/documentation/swiftui/divider )
399
368
369
+ ### Background
370
+
371
+ 将图像用作背景
372
+
373
+ ``` swift
374
+ Text (" Hello World" )
375
+ .font (.largeTitle )
376
+ .background (
377
+ Image (" hello_world" )
378
+ .resizable ()
379
+ .frame (width : 100 , height : 100 )
380
+ )
381
+ ```
382
+
400
383
Input(输入)
401
384
---
402
385
0 commit comments