實(shí)戰(zhàn)需求
SwiftUI教程之ScrollView和多個(gè)LazyVGrid 組合實(shí)現(xiàn)自動(dòng)適應(yīng)寬度
本文價(jià)值與收獲
看完本文后，您將能夠作出下面的界面
截屏2020-11-14 上午8.37.56.png
Jietu20201114-083832.gif
看完本文您將掌握的技能
- GeometryReader
- LazyVGrid
- .sectionHeaders
- Section
- ScrollView(.horizontal)
- Array(repeating: GridItem(.flexible(minimum: 100, maximum: maxwidth)
基礎(chǔ)知識(shí)
LazyVGrid
一種容器視圖请梢，它在垂直增長的網(wǎng)格中排列其子視圖赠尾，僅在需要時(shí)創(chuàng)建項(xiàng)。
struct LazyVGrid<Content> where Content : View
使用教程
grid網(wǎng)格組件是惰性的毅弧，因?yàn)榫W(wǎng)格視圖在需要它們之前不會(huì)創(chuàng)建項(xiàng)目气嫁。
在以下示例中，ScrollView包含一個(gè)LazyVGrid够坐，該LazyVGrid由垂直排列的Text視圖網(wǎng)格組成寸宵，并與滾動(dòng)視圖的頂部對(duì)齊。 對(duì)于網(wǎng)格中的每一列元咙，最上一行顯示“ Smileys”組中的Unicode代碼點(diǎn)梯影，最下一行顯示其對(duì)應(yīng)的表情符號(hào)。
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)
}
GeometryReader
一個(gè)容器視圖庶香，根據(jù)其自身大小和坐標(biāo)空間定義其內(nèi)容甲棍。
@frozen struct GeometryReader<Content> where Content : View
總覽
此視圖將靈活的首選大小返回到其父布局。
