Put simply, i want to achieve what is shown in this image.
There is an image and a text placed side by side. The text starts on the same height as the image, then when it has enough space, it continues from the leading edge
The code i have does not wrap the text once there is enough space. This is what it displays:rendered view
I am using the latest version of swiftUI
VStack{
HStack (alignment: .top){
AsyncImage(url: URL(string: "https://images.unsplash.com/photo-1619679505795-a4d0e6be5e02?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")) { phase in
if let image = phase.image {
image
.resizable()
.scaledToFit()
} else if phase.error != nil {
Text("There was an error loading the image.")
} else {
ProgressView()
}
}
.containerRelativeFrame(.horizontal, alignment: .leading) { size, axis in
size * 0.25
}
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum magna magna, eget dignissim leo lobortis eget.Maecenas bibendum magna magna, eget dignissim leo lobortis eget. Sed metus quam, condimentum in quam vel, rhoncus tempor purus. Proin tortor augue, commodo eu turpis in, rhoncus varius lorem. Morbi ut sapien eget diam viverra mattis quis et augue.")
.padding(.leading)
}
}
.padding(.horizontal, 12)
.padding(.vertical, 20)
.border(Color.black)




