實(shí)戰(zhàn)需求
SwiftUI ScrollView 滾動到制定頁面并點(diǎn)擊放大
本文價值與收獲
看完本文后，您將能夠作出下面的界面
截屏2020-08-29 下午11.52.03.png
Jietu20200830-000108.gif
看完本文您將掌握的技能
- 掌握 ScrollView
- 掌握 LazyHGrid
- 掌握 onAppear
- 掌握 Rectangle
- 掌握 onTapGesture
- 掌握 animation
基礎(chǔ)知識
ScrollView
一個可以滾動的視圖
struct ScrollView<Content> where Content : View
滾動視圖在可滾動內(nèi)容區(qū)域內(nèi)顯示其內(nèi)容鉴扫。
主題
創(chuàng)建滾動視圖
1狞贱、init(Axis.Set, showsIndicators: Bool, content: () -> Content)
創(chuàng)建一個新實(shí)例，該實(shí)例可以在給定軸的方向上滾動郎仆，并且可以在滾動時顯示指示器只祠。
配置滾動視圖
2、var content: Content
滾動視圖的內(nèi)容扰肌。
3抛寝、var axes: Axis.Set
滾動視圖的可滾動軸。
4曙旭、var showsIndicators: Bool
一個值盗舰，該值指示滾動視圖是否以適合平臺的方式顯示內(nèi)容偏移量的可滾動組件。
LazyHGrid
容器視圖桂躏，將其子視圖排列在水平增長的網(wǎng)格中钻趋，僅在需要時創(chuàng)建項(xiàng)目。
struct LazyHGrid<Content> where Content : View
總覽
網(wǎng)格是“惰性的”剂习，因?yàn)榫W(wǎng)格視圖在需要它們之前不會創(chuàng)建項(xiàng)目蛮位。
在下面的示例中，一個包含一個由水平排列的視圖網(wǎng)格組成的鳞绕，該視圖網(wǎng)格與滾動視圖的頂部對齊失仁。對于網(wǎng)格中的每一列，第一行顯示“ Smileys”組中的Unicode代碼點(diǎn)们何，底部顯示其對應(yīng)的表情符號萄焦。
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)
}
}
}
