It is always better to know about all the tools before you start your DIY project. You need to know what tools are available and what each tool can be used for. The same strategy can be applied to UI design. If you know all the available tools provided by the SwiftUI framework then you will be able to apply that knowledge to the beautiful designs that your designer has provided you with. Following are the Layout containers provided by SwiftUI.
you can refer HStack as a horizontal stack. You want to stack your controls shown in the image below.
The views in SwiftUI are aligned in a similar fashion as shown in image below.
LazyHStack
As the name says this is a Lazy container. As the keyword, Lazy in a programming language is a strategy to delay the initialization until it is needed. The views in the LazyStack are not initialized until they are needed.
You can try this code and see how it works.
The Stack is referred to as vertical stack e.g. as shown in the image below
The corresponding SwiftUI views are stacked in a similar fashion as shown in the image below.
LazyVStack
LazyVStack works very similar to LazyHStack, it’s just that it will align the items vertically. Before you read further, I want you to try the code from the LazyHStack section and just change the LazyHStack to LazyVStack.
Check the output in the debug window. Must be wondering what is going on there. All the items are getting rendered.
So what should you do it fix it? Try it before looking at the code below.
I am sure you have tried it. The thing is that you need to change the ScrollView to be .vertical.
As the name suggests Spacer control takes the remaining space in the view. Spacer takes the remaining amount and if you have multiple spacers the remaining space will be divided equally among different spacers. e.g. as shown in the image below with VStack
The spacer works in a similar way in HStack as well.
Divider shows a vertical or horizontal line based on if we are using it in HStack or VStack. Shows vertical line when used in HStack
Shows the horizontal line when used in VStack
ZStack
ZStack is used to stack controls in z-axis.
LazyHGrid
The grid has horizontal rows and vertical columns. This is a horizontal grid, we can specify rows for this Grid.
Here is the code that you can try to see how LazyHGrid renders the elements. Try to play with the code and understand the different parameters of the GridItem and LazyHGrid.
I have added a commented Text view. Think about how it will be rendered as per your understanding and then Run the code and check the output.
LazyVGrid
Columns are vertical in the Grid and this is a VGrid and we need to define columns definition for this grid.
Let’s change the minimum required code in the LazyHGrid section code to make it work for LazyVGrid.
Use the below code and run it. Check the output and try to understand the rendering.
Now change the grid item to be .flexible() and see the output. Try playing with column counts and uncomment the Text view and see the output and try to understand how the rendering is happening and play with the code. If you have any questions leave them in the comments.
GridItem
We are using GridItem to define the Rows and Columns definition for the Grid. It has different properties that we can define when we initialize it as Size, Spacing, and Alignment.
Originally published at https://www.codewithkarma.com.
