Cf2e4cab2a235f454eecfb8386af6205
SwiftUI LazyHGrid 让组件全部充满空间GridItem GeometryReader (教程含源码)

实战需求

SwiftUI LazyHGrid 让组件全部充满空间

本文价值与收获

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

自动填满屏幕

自动填满屏幕

看完本文您将掌握的技能

  • GeometryReader
  • LazyHGrid
  • RoundedRectangle
  • GridItem

基础知识

LazyHGrid 容器视图,将其子视图排列在水平增长的网格中,仅在需要时创建项目。

struct LazyHGrid<Content> where Content : View 

总览

网格是“惰性的”,因为网格视图在需要它们之前不会创建项目。在下面的示例中,一个包含一个由水平排列的视图网格组成的,该视图网格与滚动视图的顶部对齐。对于网格中的每一列,第一行显示“Smileys”组中的Unicode代码点,底部显示其对应的表情符号。

var rows: [GridItem] =
               Array(repeating: .init(.fixed(20)), count: 2) ScrollView(.horizontal) {
           LazyHGrid(rows: rows, alignment: .top) {
               ForEach((0...79), id: \.self) {
                   let codepoint = $0 + 0x1f600
                   let codepointString = String(format: "%02X", codepoint)
                   Text("\(codepointString)")
                       .font(.footnote)
                   let emoji = String(Character(UnicodeScalar(codepoint)!))
                   Text("\(emoji)")
                       .font(.largeTitle)
               }
           } } 

GridItem

对单个grid网格元素(例如行或列)的描述。
```
struct GridItem

top Created with Sketch.