HStack Alignments

Question

Hi

First SwiftUI app and spent a few hours trying to fix the alignment with the following layout.

struct ContentView: View {
    var body: some View {
         VStack {
            Text("About My Data")
                .font(.title)
                .fontWeight(.heavy)
                .multilineTextAlignment(.center)
                .padding()            

            Spacer().frame(height: 64)

            HStack {
                Image(systemName: "network")
                    .font(.system(size: 36.0))
                    .foregroundColor(.blue)
                VStack(alignment: .leading) {
                    Text("Network Support")
                        .font(.headline)
                        .fontWeight(.bold)
                    Text("Download your data from anywhere.")
                        .font(.body)
                        .foregroundColor(.gray)
                        .multilineTextAlignment(.leading)
                }
            }.padding()

            Spacer().frame(height:24)

            HStack {
                Image(systemName: "hand.raised.fill")
                    .font(.system(size: 36.0))
                    .foregroundColor(.blue)
               VStack(alignment: .leading) {
                    Text("Data Privacy")
                        .font(.headline)
                        .fontWeight(.bold)
                    Text("Scanned certificates are never stored on the device.")
                        .font(.body)
                        .foregroundColor(.gray)
                        .multilineTextAlignment(.leading)
                }
            }.padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

You can see that the HStack alignments are off, the first (showing the network image) seems to have a extra padding , not sure how to correct it if anyone has some suggestions.

Many thanks

SwiftUI

1.3k

Posted by

craigaps

Reply

Add a Comment

Answer 1

After some more trial and error I finally got the look I was after. HStack padding seemed to cause the issue. Here is the final result.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 64) {
            Text("About My Data")
                .font(.title)
                .fontWeight(.heavy)
                .multilineTextAlignment(.center)
                .padding()

            VStack(alignment: .leading, spacing: 32) {
                HStack {
                    Image(systemName: "network")
                            .font(.system(size: 36.0))
                            .foregroundColor(.blue)

                    VStack(alignment: .leading) {
                       Text("Network Support")
                          .font(.headline)
                          .fontWeight(.bold)
                       Text("Download your data from anywhere.")
                          .font(.body)
                          .foregroundColor(.gray)
                    }
                }

                HStack {
                    Image(systemName: "hand.raised.fill")
                        .font(.system(size: 36.0))
                        .foregroundColor(.blue)

                    VStack(alignment: .leading) {
                         Text("Data Privacy")
                           .font(.headline)
                           .fontWeight(.bold)
                        Text("Scanned certificates are never stored on the device.")
                           .font(.body)
                           .foregroundColor(.gray)
                    }
                }
            }

        }.padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Posted by

craigaps

Add a Comment

Answer 2

It would be better if you also supplied a screenshot, and explained how it is different to what you expect.

HStack Alignment.png

The HStacks are aligned to the center.
How is this different to what you are expecting?
Extra padding on which view, in which direction?

Bonus tip:
To see the view sizes, before and after padding, try:

.background(Color.yellow)
.padding()
.background(Color.green)

Posted by

robnotyou

Add a Comment

Answer 3

@robnotyou, thanks for replying. I'm trying to achieve making the HStack full width with the image and the VStack text in both containers leading aligned. Because of the text size difference it's slight off.

Posted by

craigaps

Add a Comment

Answer 4

After some more trial and error I finally got the look I was after. HStack padding seemed to cause the issue. Here is the final result.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 64) {
            Text("About My Data")
                .font(.title)
                .fontWeight(.heavy)
                .multilineTextAlignment(.center)
                .padding()

            VStack(alignment: .leading, spacing: 32) {
                HStack {
                    Image(systemName: "network")
                            .font(.system(size: 36.0))
                            .foregroundColor(.blue)

                    VStack(alignment: .leading) {
                       Text("Network Support")
                          .font(.headline)
                          .fontWeight(.bold)
                       Text("Download your data from anywhere.")
                          .font(.body)
                          .foregroundColor(.gray)
                    }
                }

                HStack {
                    Image(systemName: "hand.raised.fill")
                        .font(.system(size: 36.0))
                        .foregroundColor(.blue)

                    VStack(alignment: .leading) {
                         Text("Data Privacy")
                           .font(.headline)
                           .fontWeight(.bold)
                        Text("Scanned certificates are never stored on the device.")
                           .font(.body)
                           .foregroundColor(.gray)
                    }
                }
            }

        }.padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Posted by

craigaps

Add a Comment

HStack Alignments

Accepted Reply

Replies