HStack in SwiftUI Basics

Documents: developer.apple.com/documentati…

View that rows child elements horizontally.

Create a horizontal static list:

struct HStackPage: View {
    var body: some View {
        HStack (spacing: 10) {Spacer()
                .frame(width: 50, height: 50)
                .background(Color.red)
                .cornerRadius(25)
                .overlay(
                    RoundedRectangle(cornerRadius: 25)
                            .stroke(lineWidth: 4)
                            .foregroundColor(.blue)
                )
            
            Text("Hello, World!")
            Spacer()
        }.padding()
      
    }
}
Copy the code

HStack definition:

@frozen public struct HStack<Content> : View where Content : View {
    @inlinable public init(alignment: VerticalAlignment = .center, spacing: CGFloat? = nil.@ViewBuilder content: () - >Content)

    public typealias Body = Never
}
Copy the code

HStack constructor parameter description:

• spacing: CGFloat?, sets the gap before the subview
• alignment: VerticalAlignmentVertical alignment of subviews

Spacing is easy to set and understand, but alignment is highlighted below.

VerticalAlignment

An alignment position along the horizontal axis.

It is a structure with the following static properties:

• static let bottom: VerticalAlignment
• static let center: VerticalAlignment
• static let firstTextBaseline: VerticalAlignment
• static let lastTextBaseline: VerticalAlignment
• static let top: VerticalAlignment

To better understand the differences between these layouts, we first create a generic component, HStackCaseItem, to facilitate code reuse:

struct HStackCaseItem: View {
    let alignment: VerticalAlignment
    var body: some View {
         HStack(alignment: alignment, spacing: 20) {Text("A\nB")
                .frame(width: 50)
                .background(Color.yellow)
            
            Text("\(alignment.name)\nhello\nworld\nOldBirds")
                .foregroundColor(.white)
                .frame(width:150)
                .background(Color.red)
                .padding([.bottom, .top])
                .background(Color.red.opacity(0.5))
                
            Text("OldBirds")
                .background(Color.green)
                .foregroundColor(.white)
            
         }.background(Color.gray)
    }
}

extension VerticalAlignment {
    var name: String {
        switch self {
        case .top:
            return "top"
        case .bottom:
            return "bottom"
        case .center:
            return "center"
        case .firstTextBaseline:
            return "firstTextBaseline"
        case .lastTextBaseline:
            return "lastTextBaseline"
        default:
            return "other"}}}Copy the code

Then initialize the different alignments separately:

struct CasePage: View {
    var body: some View {
        VStack {
            HStackCaseItem(alignment: .top)
            Spacer().frame(height: 20)
            HStackCaseItem(alignment: .bottom)
            Spacer().frame(height: 20)
            HStackCaseItem(alignment: .center)
            Spacer().frame(height: 20)
            HStackCaseItem(alignment: .firstTextBaseline)
            Spacer().frame(height: 20)
            HStackCaseItem(alignment: .lastTextBaseline)
        }
    }
}
Copy the code

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

• .topAlign top of subview office
• .center: Aligns the office center in subview
• .bottomAlign the bottom of the subview
• .firstTextBaseline: indicates that all text lines are aligned with the uppermost base line
• .lastTextBaseline: indicates that all text lines are aligned with the base line of the lowermost line.

Use padding to overlay the HStack view

struct CircleRow:View {
    let colors = [Color.red, Color.yellow, Color.purple]
    var body: some View {
        HStack {
            ForEach(0..<3) { (index) in
                Circle()
                    .strokeBorder(Color.white, lineWidth: 2)
                    .shadow(color: .black, radius: 5, x: 1, y: 1)
                    .background(Circle().foregroundColor(colors[index]))
                    .frame(width: 100, height: 100)
                    .padding(.leading, -30)}}}}Copy the code

For more SwiftUI tutorials, head to OldBirds/SwiftUI