SwiftUI 基础篇之 VStack

Documents: developer.apple.com/documentati…

View that vertically rows child elements.

Create a vertical static list:

VStack (alignment: .center, spacing: 20) {Text("Hello")
    Divider(a)Text("World")}Copy the code

VStack definition:

@frozen public struct VStack<Content> : View where Content : View {
    @inlinable public init(alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil.@ViewBuilder content: () - >Content)
    public typealias Body = Never
}
Copy the code

HStack constructor parameter description:

• spacing: CGFloat?To set the vertical spacing between subviews
• alignment: HorizontalAlignment, subview alignment

HorizontalAlignment

An alignment position along the horizontal axis.

It is a structure with the following static properties:

• leading
• center
• trailing

To better understand these layout problems, we will first create a generic VStackCaseItem for code reuse:

struct VStackCaseItem: View {
    let alignment: HorizontalAlignment
    
    var body: some View {
         VStack(alignment: alignment, spacing: 20) {Text("A\nB")
                .frame(width: 50)
                .background(Color.yellow)
            
            Text(alignment.name)
                .foregroundColor(.white)
                .frame(width:150)
                .background(Color.red)
                
               
            Text("OldBirds")
                .background(Color.green)
                .foregroundColor(.white)
            
         }.background(Color.gray)
    }
}

extension HorizontalAlignment {
    var name: String {
        switch self {
        case .leading:
            return "leading"
        case .trailing:
            return "trailing"
        case .center:
            return "center"
        default:
            return "other"}}}Copy the code

Then initialize the different alignments separately:

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            VStackCaseItem(alignment: .leading)
            VStackCaseItem(alignment: .trailing)
            VStackCaseItem(alignment: .center)
        }
    }
}
Copy the code

By previewing the effect, you can easily find the differences in alignment.

• .leadingAlign the sub-view to the left
• .center: Aligns subviews in the office
• .trailingAlign the subview to the right

Make VStack fill the width of the screen

Here’s an example:

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
          Text("Title")
            .font(.title)

          Text("Content")
            .lineLimit(nil)
            .font(.body)

          Spacer()
        }
        .background(Color.red)
    }
}
Copy the code

Display effect:

Label/text components don’t need full width. How do I get VStack to fill the width of the screen?

Scheme 1: Set the frame

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
          Text("Title")
            .font(.title)
            .background(Color.yellow)

          Text("Content")
            .lineLimit(nil)
            .font(.body)
            .background(Color.blue)
        }
        .frame(
          maxWidth: .infinity,
          maxHeight: .infinity,
          alignment: .topLeading
        )
        .background(Color.red)
    }
}
Copy the code

In addition to setting the size to.infinity, you can also set the size with the GeometryReader:

struct ContentView: View {
    var body: some View {
        GeometryReader { geometryProxy in
            VStack(alignment: .leading) {
              Text("Title")
                .font(.title)
                .background(Color.yellow)

              Text("Content")
                .lineLimit(nil)
                .font(.body)
                .background(Color.blue)
            }
            .frame(
                maxWidth: geometryProxy.size.width,
                maxHeight: geometryProxy.size.height,
                alignment: .topLeading
            )
        }
        .background(Color.red)
    }
}
Copy the code

Combine HStack with Spacer

struct ContentView: View {

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
              Text("Title")
                .font(.title)
                .background(Color.yellow)

              Text("Content")
                .lineLimit(nil)
                .font(.body)
                .background(Color.blue)
                
                Spacer()}Spacer()
        }.background(Color.red)
    }
}
Copy the code

For more SwiftUI articles, go to OldBirds/SwiftUI