SwiftUI HStack vetrical Alignment doesn't work?

Question

I have the following code:

HStack(alignment: VerticalAlignment.top) {
    Button("x"){
        self.errorText = ""
    }
    //Spacer()
}

I need to locate button on the top. But button is still on the center of HStack view.

What I did wrong?

PS: Using Spacer() in this place is not solution for me. I need exactly alignment.

NOT NECESSARY PART:

@State var errorText: String = "Some long error text long long long long long long long long long long long long long long long long long long long long"

        VStack{
            Spacer()
            HStack{
                Text("Error: \(errorText)")
                Spacer()
                HStack(alignment: VerticalAlignment.top) {
                    Button("x"){
                        self.errorText = ""
                    }
                    //Spacer()
                }
            }
            .frame(minHeight:10)
            .padding(.all, 5)
        }

I don't know height of the VStack (HStack parent), because of I don't know size of the error text;

Spacer() is not solution because of it's makes VStack height to the window height.

The parameter alignment: VerticalAlignment.top is for subviews, not the for HStack itself. It as a subview of its parent is aligned according to parent alignment. — Asperi
@Asperi, button is subview of HStack, but it's located on the center, but not on the top of HStack. I need to locate button on the top. — Andrew
If the button is the only item in the HStack the HStack is tighten to its content, so to size of button. Alignment means between internal items, ie. center all internal items or align by vertical edge all internal items, but if item is the only one... what is to align? — Asperi
@Asperi, Oh, that's the reason. I understood now. In this case I need to make HStack to have a height of parent view. How can I do this? — Andrew
Look as example of non-trivial layout here How to prevent a Spacer to make a VStack greedly grow beyond necessary? — Asperi

Mojtaba Hosseini Mojtaba Hosseini · Accepted Answer · 2019-11-23T18:43:05

You should align the outer HStack instead. Also the inner one is useless. So you can get rid of it.

VStack{
    Spacer()
    HStack(alignment: .top) {
        Text("Error: \(errorText)")
        Spacer()
        Button("x"){ self.errorText = "" }
    }
    .frame(minHeight:10)
    .padding(.all, 5)
}

SwiftUI HStack vetrical Alignment doesn't work?

1 Answers