CODEWITHSUNDEEP
swiftalignmentvertical-alignmentswiftui
Andrew
Andrew

Reputation: 11362

SwiftUI HStack vetrical Alignment doesn't work?

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.

enter image description here

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.

Upvotes: 1

Views: 11965

Answers (3)

Arjun Patel
Arjun Patel

Reputation: 1520

try with alignment .firstTextBaseline

It will align top of the text on the first lines.

VStack{
  
   HStack(alignment: .firstTextBaseline) {
            Text("Error: \(errorText)")
            Button("x"){ self.errorText = "" }
        }
        .padding()
    }

Upvotes: 0

Code on the Rocks
Code on the Rocks

Reputation: 17854

I have found that the alignment property in the HStack initializer rarely works how you expect.

Using HStack Alignment (No Effect)

VStack {
                HStack(alignment: .bottom, content: {
                    Text("Left").background(.red)
                    Text("Right").background(.green)
               })
               .frame(maxWidth: .infinity)
               .frame(height: 100)
               .background(.blue)
            }

enter image description here

Using Frame Modifier (Works)

A more reliable way of setting the cross-axis alignment in an HStack is to use the .frame modifier like this:

VStack {
                HStack(alignment: .center, content: {
                    Text("Left").background(.red)
                    Text("Right").background(.green)
               })
               .frame(maxWidth: .infinity)
               .frame(height: 100, alignment: .bottom) // Add this
               .background(.blue)
            }

enter image description here

Upvotes: 1

Mojtaba Hosseini
Mojtaba Hosseini

Reputation: 120113

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)
}

Upvotes: 6

Related Questions