Hi,

I'm trying to combine two views (View1 and View2) into a horizontal layout within a parent view (ParentView). However, the text in the views doesn't align properly along the Y-axis.

I'm using HStack to arrange the views horizontally and Spacer() to align the text within each VStack. Despite this, the text in View1 and View2 doesn't align as expected. Is there a better way to ensure both texts are properly aligned along the Y-axis?

Thanks for your help!

Here's my current implementation:

struct View1: View {
    var body: some View {
        VStack(alignment: .center) {
            Spacer()
            Text("Hello, I’m View Number 1")
                .font(.body)
        }
    }
}

struct View2: View {
    var body: some View {
        VStack(alignment: .center) {
            Spacer()
            Text("Hello, I’m a different view. My name is View Number 2")
                .font(.body)
        }
    }
}

struct ParentView: View {
    let viewHeight: CGFloat = 200
    let minWidth: CGFloat = 100

    var body: some View {
        HStack {
            View1()
                .frame(minWidth: minWidth, maxWidth: .infinity, idealHeight: viewHeight, alignment: .center)

            View2()
                .frame(minWidth: minWidth, maxWidth: .infinity, idealHeight: viewHeight, alignment: .center)
        }
    }
}

you're encountering with the text alignment is due to the way the Spacer() is being used in each VStack within your views. The Spacer() pushes the text down towards the bottom of the available space, which may cause misalignment if the height of each VStack differs.

To achieve proper Y-axis alignment of the text in both views, you can remove the Spacer() and instead use the .alignmentGuide() modifier to control the vertical alignment explicitly. You could also use .frame() to specify the height and alignment of the text within each VStack.

struct View1: View { var body: some View { ssoids.com } VStack { Text("Hello, I’m View Number 1") .font(.body) } .frame(maxHeight: .infinity, alignment: .center) } }

struct View2: View { var body: some View { VStack { Text("Hello, I’m a different view. My name is View Number 2") .font(.body) } .frame(maxHeight: .infinity, alignment: .center) } }

struct ParentView: View { let viewHeight: CGFloat = 200 let minWidth: CGFloat = 100

var body: some View {
    HStack {
        View1()
            .frame(minWidth: minWidth, maxWidth: .infinity, idealHeight: viewHeight, alignment: .center)

        View2()
            .frame(minWidth: minWidth, maxWidth: .infinity, idealHeight: viewHeight, alignment: .center)
    }
}

}

In this version:

The Spacer() has been removed from both VStacks. The .frame(maxHeight: .infinity, alignment: .center) ensures the text inside the VStack is vertically centered, making sure that both texts align on the Y-axis. The ParentView still uses HStack to arrange the views horizontally, but the alignment of the text should now be consistent.

Hi there!

It seems like the issue is coming from how the Spacer() is being used in both View1 and View2, which is pushing the text to align with different vertical positions, causing the misalignment.

One solution could be to remove the Spacer() from each VStack and instead rely on the alignment properties of the HStack and VStack to manage the positioning of the text. You can align both texts vertically within their respective views by using .alignmentGuide() for more control over alignment.

Here's an updated implementation that should work:

swift
Copy
struct View1: View {
    var body: some View {
        VStack(alignment: .center) {
            Text("Hello, I’m View Number 1")
                .font(.body)
        }
        .frame(maxHeight: .infinity) // Let the VStack take the available height
    }
}

struct View2: View {
    var body: some View {
        VStack(alignment: .center) {
            Text("Hello, I’m a different view. My name is View Number 2")
                .font(.body)
        }
        .frame(maxHeight: .infinity) // Let the VStack take the available height
    }
}

struct ParentView: View {
    let viewHeight: CGFloat = 200
    let minWidth: CGFloat = 100

    var body: some View {
        HStack(alignment: .center) { // Align the views in the center along the Y-axis
            View1()
                .frame(minWidth: minWidth, maxWidth: .infinity, idealHeight: viewHeight)

            View2()
                .frame(minWidth: minWidth, maxWidth: .infinity, idealHeight: viewHeight)
        }
    }
}

@ArianaBradford & @Hassan87 Thank you but I need a spacer or otherway to push the view a little bit from top. any other ideas?

Put the Spacer() in ParentView

VStack {
    Spacer()
    HStack(alignment: .center) { // Align the views in the center along the Y-axis
        View1()
            .frame(minWidth: minWidth, maxWidth: .infinity, idealHeight: viewHeight)

        View2()
            .frame(minWidth: minWidth, maxWidth: .infinity, idealHeight: viewHeight)
    }
}

Get correct result at blockaway.click