【SwiftUI】List를 가로로 스크롤시킨다
「
SwiftUI List Horizontal
」등으로 검색하면ScrollView (.horizontal) {
HStack {
...
}
}
와 같은
ScrollView
를 사용한 것이 많이 히트합니다만, 이 경우는 거대한 데이터의 경우에 문제가 나옵니다(Row의 데이터가 최초로 모두 작성되어 버리기 때문입니다).그래서
List
를 rotationEffect
로 90도 회전시켜 가로 스크롤을 실현합니다.환경
코드
ContentView.swiftimport SwiftUI
struct ContentView: View {
var body: some View {
VStack {
ItemList(items: (0..<100).map { ItemData(index: $0) })
.frame(height: 100)
ItemList(items: (500..<600).map { ItemData(index: $0) })
ItemList(items: (1000..<1100).map { ItemData(index: $0) })
}
}
}
struct ItemData {
var index = 0
var check = false
}
struct ItemList: View {
@State var items: [ItemData]
var body: some View {
GeometryReader { geo in
List(0..<items.count) { i in
ItemRow(item: $items[i])
.frame(height: 100)
.contentShape(Rectangle())
}
.frame(width: geo.size.height, height: geo.size.width)
.rotationEffect(.degrees(-90), anchor: .bottomLeading)
.transformEffect(.init(translationX: geo.size.width, y: 0))
.scaleEffect(x: 1, y: -1)
}
}
}
struct ItemRow: View {
@Binding var item: ItemData
var body: some View {
GeometryReader { geo in
ZStack {
Color.blue.opacity(item.check ? 0.5 : 0.3)
.cornerRadius(8)
Text("\(item.index)")
}
.frame(width: geo.size.height, height: geo.size.width)
.rotationEffect(.degrees(90), anchor: .topTrailing)
.transformEffect(.init(translationX: 0, y: geo.size.height))
.scaleEffect(x: -1, y: 1)
.onTapGesture {
item.check.toggle()
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
리포지토리
문제점
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
ItemList(items: (0..<100).map { ItemData(index: $0) })
.frame(height: 100)
ItemList(items: (500..<600).map { ItemData(index: $0) })
ItemList(items: (1000..<1100).map { ItemData(index: $0) })
}
}
}
struct ItemData {
var index = 0
var check = false
}
struct ItemList: View {
@State var items: [ItemData]
var body: some View {
GeometryReader { geo in
List(0..<items.count) { i in
ItemRow(item: $items[i])
.frame(height: 100)
.contentShape(Rectangle())
}
.frame(width: geo.size.height, height: geo.size.width)
.rotationEffect(.degrees(-90), anchor: .bottomLeading)
.transformEffect(.init(translationX: geo.size.width, y: 0))
.scaleEffect(x: 1, y: -1)
}
}
}
struct ItemRow: View {
@Binding var item: ItemData
var body: some View {
GeometryReader { geo in
ZStack {
Color.blue.opacity(item.check ? 0.5 : 0.3)
.cornerRadius(8)
Text("\(item.index)")
}
.frame(width: geo.size.height, height: geo.size.width)
.rotationEffect(.degrees(90), anchor: .topTrailing)
.transformEffect(.init(translationX: 0, y: geo.size.height))
.scaleEffect(x: -1, y: 1)
.onTapGesture {
item.check.toggle()
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
문제점
Reference
이 문제에 관하여(【SwiftUI】List를 가로로 스크롤시킨다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/eb4gh/items/e380bc55dfbf1ff42362텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)