HStack Alignments

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

Answered by craigaps in 697010022

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

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

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)

@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.

Accepted Answer

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()
    }
}
HStack Alignments
 
 
Q