SwiftUI教程之ScrollView和多个LazyVGrid 组合实现自动适应宽度 (教程含源码)

SwiftUI教程之ScrollView和多个LazyVGrid 组合实现自动适应宽度 (教程含源码)

实战需求 SwiftUI教程之ScrollView和多个LazyVGrid 组合实现自动适应宽度 本文价值与收获 看完本文后,您将能够作出下面的界面 截屏2020-11-14 上午8.37.56.png Jietu20201114-083832.gif 看完本文您将掌握的技能 GeometryReader LazyVGrid .sectionHea...

实战需求

SwiftUI教程之ScrollView和多个LazyVGrid 组合实现自动适应宽度

本文价值与收获

看完本文后,您将能够作出下面的界面

截屏2020-11-14 上午8.37.56.png
Jietu20201114-083832.gif

看完本文您将掌握的技能

  • GeometryReader
  • LazyVGrid
  • .sectionHeaders
  • Section
  • ScrollView(.horizontal)
  • Array(repeating: GridItem(.flexible(minimum: 100, maximum: maxwidth)

基础知识

LazyVGrid

一种容器视图,它在垂直增长的网格中排列其子视图,仅在需要时创建项。

struct LazyVGrid where Content : View

使用教程

grid网格组件是惰性的,因为网格视图在需要它们之前不会创建项目。

在以下示例中,ScrollView包含一个LazyVGrid,该LazyVGrid由垂直排列的Text视图网格组成,并与滚动视图的顶部对齐。 对于网格中的每一列,最上一行显示“ Smileys”组中的Unicode代码点,最下一行显示其对应的表情符号。

 var columns: [GridItem] =
         Array(repeating: .init(.flexible()), count: 2)
 ScrollView {
     LazyVGrid(columns: columns) {
         ForEach((0...79), id: .self) {
             let codepoint = $0 + 0x1f600
             let codepointString = String(format: "%02X", codepoint)
             Text("(codepointString)")
             let emoji = String(Character(UnicodeScalar(codepoint)!))
             Text("(emoji)")
         }
     }.font(.largeTitle)
 }

GeometryReader

一个容器视图,根据其自身大小和坐标空间定义其内容。

@frozen struct GeometryReader where Content : View

总览
此视图将灵活的首选大小返回到其父布局。


实战代码

文章来源于互联网:SwiftUI教程之ScrollView和多个LazyVGrid 组合实现自动适应宽度 (教程含源码)

0

评论0

鱼翔浅底,鹰击长空,驼走大漠
没有账号? 注册  忘记密码?