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