#LazyHGrid

[arthurknopper]

SwiftUI Lazy Grid Tutorial

SwiftUI provides two UI element, LazyHGrid for horizontal grids and LazyVGrid for vertical grids layout. Differrent kinds of layout can be created, the lazy keyword means the items will not be created at the loading of the app, but only when needed. In this tutorial different kinds of layout will be displayed contaiining 1000 items of numbers., The LazyHGrid and LazyVGrid are introduced with SwiftUI 2.0 and requires Xcode 12, for which the Beta can be downloaded at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUILazyGridTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbox and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Change the code inside the ContentView struct to

struct ContentView: View { private var flexibleLayout = [GridItem(.flexible()), GridItem(.flexible())] private var fixedLayout = [GridItem(.fixed(100)), GridItem(.fixed(200))] private var adaptiveLayout = [GridItem(.adaptive(minimum: 100))] private var mixedLayout = [GridItem(.fixed(150)), GridItem(.adaptive(minimum: 50))] var body: some View { NavigationView() { ScrollView { // 1. LazyVGrid(columns: flexibleLayout, spacing: 20) { // 2. //LazyVGrid(columns: fixedLayout, spacing: 20) { // 3. //LazyVGrid(columns: adaptiveLayout, spacing: 20) { // 4. //LazyVGrid(columns: mixedLayout, spacing: 20) { // Display the item ForEach((1...1000), id: \.self) { Text("\($0)") .font(.title) .frame(minWidth: 0, maxWidth: .infinity, minHeight: 50) .background(Color.yellow) } } } .navigationTitle("Lazy Grids") } } }

The flexible layout divides the space equally, here two columns are displayed.

2. The fixed layout specifies fixed width of a column. Here 2 columns are shown with different width.

3. A adaptive layout will use the minimum width to diplay as many rows as it can in the layout,

4. A mixed layout can be used to mix any of the above layouts. An fixed and adaptive layout is mixed here.

The source code of the SwiftUILazyGridTutorial can be downloaded at the ioscreator repository on Github.

[cdemiranda]

via AppCoda