实战需求

SwiftUI LazyVGrid 实现高级组合选择

本文价值与收获

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

截屏2020-12-18 上午10.06.12.png

Jietu20201218-110155.gif

看完本文您将掌握的技能

• LazyVGrid
• Image
• onTapGesture

基础知识

LazyVGrid

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

struct LazyVGrid<Content> where Content : View

总览

网格是“惰性”的，因为网格视图在需要它们之前不会创建项目。

在以下示例中，包含一个由两列视图组成的网格，其中显示了来自“ Smileys”组的Unicode代码点及其对应的表情符号：ScrollViewLazyVGridText

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)
 }

实战代码