SwiftUI ScrollView 滚动到制定页面并点击放大LazyGrid （教程含源码）

实战需求

SwiftUI ScrollView 滚动到制定页面并点击放大

本文价值与收获

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

截屏2020-08-29 下午11.52.03.png

Jietu20200830-000108.gif

看完本文您将掌握的技能

• 掌握 ScrollView
• 掌握 LazyHGrid
• 掌握 onAppear
• 掌握 Rectangle
• 掌握 onTapGesture
• 掌握 animation

---

基础知识

ScrollView

一个可以滚动的视图

struct ScrollView where Content : View

滚动视图在可滚动内容区域内显示其内容。

---

主题

创建滚动视图

1、init(Axis.Set, showsIndicators: Bool, content: () -> Content)

创建一个新实例，该实例可以在给定轴的方向上滚动，并且可以在滚动时显示指示器。

配置滚动视图

2、var content: Content

滚动视图的内容。

3、var axes: Axis.Set

滚动视图的可滚动轴。

4、var showsIndicators: Bool

一个值，该值指示滚动视图是否以适合平台的方式显示内容偏移量的可滚动组件。

---

LazyHGrid

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

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

---

实战代码