Blockchain ク gainst to the list

This article uses the current latest version of Xcode 12 + macOS Big sur + iOS14

The VStack layout is vertical

VStack is a layout that aligns its children vertically.

VStack {
        RoundedRectangle(cornerRadius: 35)
            .foregroundColor(.blue)
            .frame(width: 150, height: 100)

        RoundedRectangle(cornerRadius: 35)
            .foregroundColor(.green)
            .frame(width: 200, height: 100)

        RoundedRectangle(cornerRadius: 35)
            .foregroundColor(.red)
            .frame(width: 100, height: 100)}Copy the code

The effect is as follows:

The spacing of elements is set by setting the VStack parameter spacing, and the alignment of elements is set by setting alignment. This alignment is the alignment of only elements, such as three rectangles aligned to the left, center, and right. It’s not in the VStack.

VStack(alignment:.trailing, spacing: 50) {
          RoundedRectangle(cornerRadius: 35)
              .foregroundColor(.blue)
              .frame(width: 150, height: 100)

          RoundedRectangle(cornerRadius: 35)
              .foregroundColor(.green)
              .frame(width: 200, height: 100)

          RoundedRectangle(cornerRadius: 35)
              .foregroundColor(.red)
              .frame(width: 100, height: 100)}Copy the code

The effect is as follows:

If the VStack frame is not set, the VStack calculates its own size based on the size of the element.

Set the background for the VStack in the example above.

VStack(alignment:.trailing, spacing: 50) {
		.
}
.background(Color.orange)
Copy the code

You can see that the VStack width is equal to the width of the widest rectangle and the height is equal to the size of 3 rectangle heights +spacing.

The size of the VStack equals the size of the parent node by setting the maxWidth and maxHeight of the frame to infinity.

VStack(alignment:.trailing, spacing: 50) {
		.
}
.frame(maxWidth:.infinity, maxHeight: .infinity)
.background(Color.orange)
Copy the code

The effect is as follows:

Sets the frame and sets the alignment to control the position of child elements in the VStack.

VStack(alignment:.trailing, spacing: 50) {
		.
}
.frame(maxWidth:.infinity, maxHeight: .infinity, alignment: .bottomTrailing)
.background(Color.orange)
Copy the code

Set alignment to the lower right corner of the three rectangles. The result is as follows:

You can extend the layout to the SafeArea by setting edgesIgnoringSafeArea.

VStack(alignment:.trailing, spacing: 50) {
		.
}
.frame(maxWidth:.infinity, maxHeight: .infinity, alignment: .bottomTrailing)
.background(Color.orange)
.edgesIgnoringSafeArea(.all)
Copy the code

This allows the VStack to fill the screen.

HStack and ZStack

HStack and ZStack differ from VStack except that HStack is arranged horizontally and ZStack is stacked on the Z axis. Other uses are basically the same as VStack.

LazyVStack/LazyHStack

LazyVStack and LazyHStack are new layout managers introduced in iOS14. The difference from VStack/HStack is that VStack/HStack renders all the child elements at once while LazyVStack and LazyHStack render the elements when they need to be displayed. LazyVStack and LazyHStack perform better than VStack/HStack when rendering off-screen elements, especially when combined with scrollView for scrolling lists.