@@ -233,23 +233,9 @@ Map(coordinateRegion: $region,
233233Layout(布局)
234234----
235235
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-
250236### VStack
251237
252- 以垂直线排列其子项的视图
238+ ` VStack ` 是 ` 垂直 ` 堆栈布局,用于将子视图垂直排列。默认将子视图从上到下排列
253239
254240``` swift
255241VStack (alignment : .center , spacing : 20 ){
@@ -259,13 +245,11 @@ VStack (alignment: .center, spacing: 20){
259245}
260246```
261247
262- 创建静态可滚动列表。 文档 - [ VStack] ( https://developer.apple.com/documentation/swiftui/vstack )
248+ 文档 - [ VStack] ( https://developer.apple.com/documentation/swiftui/vstack )
263249
264250### HStack
265251
266- 将其子级排列在一条水平线上的视图。
267-
268- 创建静态可滚动列表
252+ ` HStack ` 是 ` 水平 ` 堆栈布局,用于将子视图水平排列。默认将子视图从左到右排列
269253
270254``` swift
271255HStack (alignment : .center , spacing : 20 ){
@@ -277,80 +261,65 @@ HStack (alignment: .center, spacing: 20){
277261
278262文档 - [ HStack] ( https://developer.apple.com/documentation/swiftui/hstack )
279263
280- ### LazyVStack
264+ ### ZStack
281265
282- ` iOS 14 ` 一种视图,将其子级排列在垂直增长的线中,仅在需要时创建项。
266+ ` ZStack ` 是 ` 层叠 ` 堆栈布局,用于将子视图重叠在一起。按照添加的顺序从下到上排列子视图,即先添加的视图会在下面,后添加的视图会覆盖在上面
283267
284268``` 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" )
291272}
292273```
293274
294- 文档 - [ LazyVStack ] ( https://developer.apple.com/documentation/swiftui/lazyvstack )
275+ 文档 - [ ZStack ] ( https://developer.apple.com/documentation/swiftui/zstack )
295276
296- ### LazyHStack
297- <!-- rehype:wrap-class=col-span-2-->
277+ ### 懒加载 Lazy
298278
299- 将子项排列在水平增长的线中的视图,仅在需要时创建项。
279+ ` iOS 14.0 ` 之后新增的视图,仅在需要时才会创建和渲染
300280
301281``` 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 ) " )
307286 }
287+ }
308288}
309289```
310290
311- 文档 - [ LazyHStack] ( https://developer.apple.com/documentation/swiftui/lazyhstack )
291+ - 懒加载:只有当子视图进入可视区域时,才会被创建和渲染
292+ - 自适应:子视图的宽高可以自适应
293+ - 性能优化:适用于大量子视图或动态内容的场景
294+ <!-- rehype:className=style-round-->
312295
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 )
331298
332299### LazyVGrid
333- <!-- rehype:wrap-class=col-span-2-->
334300
335- 容器视图,将其子视图排列在垂直增长的网格中 ,仅在需要时创建项目。
301+ 容器视图,将其子视图排列在 ` 垂直 ` 增长的网格中 ,仅在需要时创建项目
336302
337303``` 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+ )
339308
340309ScrollView {
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 )
345313 }
314+ }
346315}
347316```
348317
349318文档 - [ LazyVGrid] ( https://developer.apple.com/documentation/swiftui/lazyvgrid )
350319
351320### LazyHGrid
352321
353- 一种容器视图,将其子视图排列在水平增长的网格中 ,仅在需要时创建项目。
322+ 容器视图,将其子视图排列在 ` 水平 ` 增长的网格中 ,仅在需要时创建项目
354323
355324``` swift
356325var rows: [GridItem] =
@@ -360,8 +329,8 @@ var rows: [GridItem] =
360329
361330ScrollView (.horizontal ) {
362331 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 )
365334 }
366335 }
367336}
@@ -397,6 +366,20 @@ HStack {
397366
398367文档 - [ Divider] ( https://developer.apple.com/documentation/swiftui/divider )
399368
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+
400383Input(输入)
401384---
402385
0 commit comments