Մտածեք դրանք որպես հորիզոնական ոլորող CollectionViews

Վերջերս WWDC 2020-ում Apple-ը ներկայացրեց LazyHGrid-ը: Շատ մշակողներ պարզել են, որ SwiftUI-ն բացակայում էր CollectionView-ի աջակցությունից, երբ այն առաջին անգամ ներկայացվեց: LazyHGrid-ի թողարկմամբ դուք այժմ կարող եք կրկնօրինակել նույն վարքագիծը, ինչ UICollectionView-ը UIKit-ում:

Կոնտեյների տեսք, որը դասավորում է իր երեխայի դիտումները հորիզոնական աճող ցանցի մեջ՝ ստեղծելով տարրեր միայն ըստ անհրաժեշտության: — Apple Developer

Նախադրյալներ

Այս ձեռնարկին հետևելու համար ձեզ հարկավոր են որոշ հիմնական գիտելիքներ հետևյալում.

  • Սվիֆթ
  • Առնվազն Xcode 12+

Նշում. սա աջակցում է միայն iOS 14+:

Ինչպես սկսել LazyHGrid-ի հետ

Ինչպես հավանաբար նկատել եք, Lazy նախածանցը հիմնականում ցույց է տալիս, որ տեսքը ցուցադրվում է միայն այն ժամանակ, երբ այն հայտնվում է էկրանին, ինչը բարձրացնում է կատարումը: Դուք չեք ցանկանում բեռնել բոլոր 1000 տվյալները միաժամանակ: LazyHGrid-ի միջոցով դուք բեռնում եք միայն էկրանին հայտնված այնքան տվյալներ:

Իրերն ավելի հետաքրքիր դարձնելու համար եկեք պատմություն կազմենք: Tesla-ն մրցույթ է անցկացնում iOS-ի ինժեներ վարձելու համար, և նրանք բացել են դիմումը բոլորի համար: Դուք սիրում եք Tesla-ն և ցանկանում եք լինել թիմի մի մասը:

Այսպիսով, դուք որոշում եք օգտագործել SwiftUI-ն և LazyHGridը՝ նրանց տպավորելու համար:

Դուք նախ պետք է կազմաձևեք դասավորությունը, և դա անելու համար կարող եք օգտագործել GridItemը: GridItem-ը հիմնականում թույլ է տալիս կարգավորել size և grid հատկությունները.

var gridItems: [GridItem] = [GridItem()]

Հաջորդը, դուք կստեղծեք LazyHGrid, որը ներկառուցված է ScrollView-ի ներսում՝ ոլորման նպատակով:

Ինչպես տեսնում եք, Assets.xcassets-ի ներսում պահվող պատկերները հիմնականում կոչվում են 1, 2, 3, 4…

Voila.

Անհատականացնել տողերը

Վերևի կազմաձևով կա միայն մեկ տող: Տողերի ավելացումը հեշտացվում է SwiftUI-ում և կարող է իրականացվել ընդամենը մեկ տող կոդի ավելացմամբ: Պարզապես փոփոխեք ձեր gridItems-ը հետևյալով.

var gridItems: [GridItem] = [GridItem(), GridItem()]

Եվ դուք այժմ կտեսնեք երկու տող: Եթե ​​ցանկանում եք ունենալ ավելի շատ տողեր, կարող եք դրանք ավելացնել ձեր հայեցողությամբ: Լռելյայնորեն, GridItem-ն օգտագործում է flexible(minimum: CGFloat = 10, maximum: CGFloat = .infinity):

Չափի հարմարեցում

Դուք նույնիսկ կարող եք խաղալ ցանցի չափի հետ՝ օգտագործելով GridItem.Sizes-ը, որը ներառում է fixed, adaptive և ​​flexible:

fixed-ով դուք կկարողանաք ապրանքին տալ որոշակի բարձրություն: Ստորև բերված կոդը հիմնականում ցույց է տալիս, որ առաջին շարքի բարձրությունը 200 է, իսկ հաջորդ տողի բարձրությունը 400 է:

var gridItems: [GridItem] = [GridItem(.flexi(200)),
                             GridItem(.fixed(400))]

flexible,-ով դուք կկարողանաք սահմանել նվազագույն և առավելագույն բարձրություն: Այստեղ դուք կարող եք նույնիսկ խառնել մի քանի այլ GridItem.Sizes:

var gridItems: [GridItem] = [GridItem(.flexible(minimum: 100, maximum: 300)),
                             GridItem(.fixed(400))]

adaptive-ով LazyHGrid-ը կորոշի, թե քանի տող է անհրաժեշտ՝ ստուգելով յուրաքանչյուր կետի բարձրությունը.

var gridItems: [GridItem] = [GridItem(.adaptive(minimum: 150, maximum: 400))]

Այստեղ յուրաքանչյուր ապրանքի բարձրությունը կրկին ճշգրտվում է հետևյալով. Եվ adaptive-ով այն պարզապես հաշվարկում է, թե քանի տող պետք է ստեղծվի.

.frame(width: 200, height: 150, alignment: .center)

Եկեք չշեղվենք հարմարեցումից: Փոխարենը, եկեք ուղարկենք մեր ներկայացումը Tesla-ի կայք և հուսանք, որ մենք կընտրվենք: