How to align text views differently under a vstack in swiftui? - swiftui

Question

I am trying to have 3 text views and an image view inside a vstack and have them align differently.
Here is my code:
VStack(alignment: .leading) {
Text("This is the first paragraph").foregroundColor(Color.red)
Spacer().frame(height: 10)
Text("This is a paragraph with ").foregroundColor(Color.blue) + Text("multiple colors.").foregroundColor(Color.green)
Spacer().frame(height: 10)
if #available(iOS 15.0, *) {
AsyncImage(url: URL(string: "https://www.example.org/img/image.png")) { image in
image.resizable()
} placeholder: {
Color.red
}
.frame(width: 128, height: 128)
.clipShape(RoundedRectangle(cornerRadius: 25))
}
Spacer().frame(height: 10)
Text("Final paragraph").foregroundColor(Color.red)
Spacer()
}
Here in the below image I would like the first line and the image to be center aligned:
I tried it like below but then the left aligned text didn't leave a margin like the above image.
struct ContentView: View {
var body: some View {
VStack {
HStack {
Text("This is the first paragraph").foregroundColor(Color.red).frame(alignment: .leading)
}
Spacer().frame(height: 10)
HStack {
Text("This is a paragraph with ").foregroundColor(Color.blue) + Text("multiple colors.").foregroundColor(Color.green)
Spacer()
}
Spacer().frame(height: 10)
HStack {
if #available(iOS 15.0, *) {
AsyncImage(url: URL(string: "https://www.example.org/img/image.png")) { image in
image.resizable()
} placeholder: {
Color.red
}
.frame(width: 128, height: 128)
.clipShape(RoundedRectangle(cornerRadius: 25))
}
}
Spacer().frame(height: 10)
HStack {
Text("Final paragraph").foregroundColor(Color.red)
Spacer()
}
Spacer()
}
}
}
The view:

Answer 1

I can assume that you just need padding in right place to have something like "margins", so a solution can be like
var body: some View {
VStack(alignment: .leading) {
Text("This is the first paragraph")
.foregroundColor(Color.red)
.frame(maxWidth: .infinity) // << default center !!
Spacer().frame(height: 10)
Text("This is a paragraph with ").foregroundColor(Color.blue) + Text("multiple colors.").foregroundColor(Color.green)
Spacer().frame(height: 10)
if #available(iOS 15.0, *) {
AsyncImage(url: URL(string: "https://www.example.org/img/image.png")) { image in
image.resizable()
} placeholder: {
Color.red
}
.frame(width: 128, height: 128)
.clipShape(RoundedRectangle(cornerRadius: 25))
.frame(maxWidth: .infinity) // << for center !!
}
Spacer().frame(height: 10)
Text("Final paragraph").foregroundColor(Color.red)
Spacer()
}
.padding(.horizontal, 24) // << for margins !!
}