实战需求
SwiftUI ScrollView 滚动到制定页面并点击放大
本文价值与收获
看完本文后，您将能够作出下面的界面
截屏2020-08-29 下午11.52.03.png
Jietu20200830-000108.gif
看完本文您将掌握的技能
- 掌握 ScrollView
- 掌握 LazyHGrid
- 掌握 onAppear
- 掌握 Rectangle
- 掌握 onTapGesture
- 掌握 animation
基础知识
ScrollView
一个可以滚动的视图
struct ScrollView<Content> 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<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)
}
}
}
