【초보자】Swift UI를 공부한다 그 ⑪ ーー Lazy Grid Layout(= StackView+CollectionView)
소개
전회는 Card에 관한 애니메이션을 완벽하게 해, 이번은 Card를 세로 줄뿐만 아니라, 보다 자유롭게 위치를 결정하도록(듯이) 합니다.
완성품↓
목차
LazyVGrid · Lazy Grid Layout은 WWDC2020에 공개되었습니다. CollectionView에서는 하루 종일 걸리는 작업은 Lazy Grid Layout에서는 점심 시간에 할 수 있습니다. html+css+js에서 Vue+Vuetify+Tailwind로 전환한 것처럼 작업 효율이 크게 향상되었습니다. · 예를 들어 columns[] 배열에 GridItem() 을 3 개 넣으면 Card가 3 열로 정렬됩니다. CoursesView.swift LazyVGrid(columns: [GridItem(), GridItem(), GridItem()], spacing: 16) { ForEach(courses) { item in CourseItem(course: item) .matchedGeometryEffect ( id: item.id, in: namespace, isSource: !show ) .frame(height: 250) .onTapGesture { withAnimation(.spring()) { show.toggle() selectedItem = item isDisabled = true } } .disabled(isDisabled) } } .padding(16) .frame(maxWidth: .infinity)
・GridItem()을 1개 1개 짜는 것은 스마트가 아니기 때문에,
GridItem(.adaptive(minimum: ) 로 최소폭을 결정할 수도 있습니다.또, iPad와 같은 화면이 큰 단말의 경우는, 숫자가 아니고
UIScreen.main.bounds.width 를 사용하면 모든 단말은 통일할 수 있습니다.또 다른 방법으로는
Array()를 사용하여 count의 수를 결정하면 열이 결정됩니다.CoursesView.swift
LazyVGrid(
columns: [
GridItem(
.adaptive(minimum: 160),
spacing: 16
)
],
spacing: 16
)
---------------------------------------------------
LazyVGrid(
columns: [
GridItem(
.adaptive(minimum: UIScreen.main.bounds.width / 3),
spacing: 16
)
],
spacing: 16
)
----------------------------------------------------
LazyVGrid(
columns: Array(
repeating: .init(.flexible(), spacing: 16), count: 2
),
spacing: 16
),
spacing: 16
LazyHGrid ・vertical과 같이 horizontal도 간단하게 할 수 있습니다. 방법도 vertical와 완전히 같습니다. CoursesView.swift ScrollView(.horizontal) { LazyHGrid ( rows: [ GridItem ( .adaptive(minimum: 160), spacing: 16 ) ], spacing: 16 ) }
요약 ・LazyGrid는 아마 프런트의 Grid system을 참고로 하고 있는 것 같습니다. 흥미가 있는 분은→ htps : // ゔ에치 fyjs. 코 m / 자 / 코 m 포넨 ts / g ds /
소스 코드 Github
참고문헌
Reference
이 문제에 관하여(【초보자】Swift UI를 공부한다 그 ⑪ ーー Lazy Grid Layout(= StackView+CollectionView)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/anchor_/items/be10bcdc7a5ea4d84cf8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
