How to align text sub-views in VStack? - swiftui

Question

I have created a package to simply layout a What's New page for an app. The core view is a BulletPointView which is defined as such:
import SwiftUI
public struct BulletPointView: View {
let title: String
let image: Image
let text : String
public init(title: String = "New feature",
image: Image = Image(systemName: "circle.fill"),
text: String = "This is a new feature for this app. And this text should wrap.") {
self.title = title
self.image = image
self.text = text
}
public var body: some View {
HStack (alignment: .center){
image
.font(.title)
.foregroundColor(Color("AccentColor"))
VStack (alignment: .leading, spacing: 4){
Text(title)
.fontWeight(.semibold)
Text(text)
.foregroundColor(.secondary)
}
.multilineTextAlignment(.leading)
.font(.subheadline)
.padding(.bottom, 6)
}
}
}
struct BulletPointView_Previews: PreviewProvider {
static var previews: some View {
VStack {
BulletPointView(image: Image(systemName: "square.and.pencil"))
BulletPointView(image: Image(systemName: "hare.fill"))
BulletPointView(image: Image(systemName: "circle.fill"))
BulletPointView(image: Image(systemName: "car.2.fill"))
BulletPointView(image: Image(systemName: "switch.2"))
BulletPointView(image: Image(systemName: "ellipsis"))
}
}
}
This allows the user to select any image to use as a bullet, or defaults to a circle. The problem is that if the images are different widths, the text to the right of the images does not align anymore as seen in the screenshot below.
How do i get all of the text views to line up regardless of the image width?
Thanks!

Answer 1

Here is the simplest way that is possible. You must to have a size for Image.
PS: You should not use Image as parameter for your view, just use the string of image. I corrected for you.
struct ContentView: View {
var body: some View {
VStack {
BulletPointView(string: "square.and.pencil")
BulletPointView(string: "hare.fill")
BulletPointView(string: "circle.fill")
BulletPointView(string: "car.2.fill")
BulletPointView(string: "switch.2")
BulletPointView(string: "swiftPunk")
}
.padding()
}
}
struct BulletPointView: View {
let title: String
let string: String
let text : String
init(title: String = "New feature",
string: String,
text: String = "This is a new feature for this app. And this text should wrap.") {
self.title = title
self.string = string
self.text = text
}
var body: some View {
HStack (alignment: .center){
imageFunction(string: string)
.scaledToFit()
.frame(width: 50, height: 50)
VStack (alignment: .leading, spacing: 4){
Text(title)
.fontWeight(.semibold)
Text(text)
.foregroundColor(.secondary)
}
.multilineTextAlignment(.leading)
.font(.subheadline)
.padding(.bottom, 6)
}
}
#ViewBuilder func imageFunction(string: String) -> some View {
if (UIImage(systemName: string) != nil) {
Image(systemName: string)
.font(.title)
}
else {
Image(string)
.resizable()
}
}
}