align my images, but I can't find a way how. Any insights would be greatly appreciated. Thanks. I tried (alignment: .trailing), but that doesn't work either. Here's a link to my view
struct ArticleRowView: View {
let article: Article
var body: some View {
VStack(alignment: .leading){
HStack(spacing: 16){
VStack(alignment: .leading, spacing: 4){
Text(article.siteText)
.font(Font.custom("Inter-Regular.ttf", size: 12))
.padding([.bottom], 4)
Text(article.titleText)
.font(Font.custom("Inter-SemiBold.ttf", size: 20))
.minimumScaleFactor(0.75)
.padding([.bottom], 4)
HStack(spacing: 8){
Text(article.dateText)
.font(Font.custom("Inter-Regular.ttf", size: 12))
Image("rect")
Text(article.tickerText)
.font(Font.custom("Inter-Regular.ttf", size: 12))
Image("green")
.padding([.leading, .trailing], -8)
Text("2.33%")
.font(Font.custom("Inter-Regular.ttf", size: 12))
.foregroundColor(Color(red: 0.345, green: 0.50, blue: 0.155, opacity: 1.0))
}.lineLimit(1)
.minimumScaleFactor(0.75)
}
AsyncImage(url: article.imageURL) {image in
image.resizable()
.frame(width: 64, height: 64, alignment: .trailing)
.aspectRatio(contentMode: .fill)
.cornerRadius(6)
} placeholder: {
ProgressView()
}
}.listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
.listRowSeparator(.hidden)
Image("rect-hor")
}
}
}
CodePudding user response:
Use a Spacer()
between your VStack
and AsyncImage
, which will fill up available horizontal space in the HStack
and push your image to the trailing edge:
VStack(alignment: .leading, spacing: 4) {
//content
}
Spacer() //<-- Here
AsyncImage(url: article.imageURL) { image in
image.resizable()
.frame(width: 64, height: 64)
.aspectRatio(contentMode: .fill)
.cornerRadius(6)
} placeholder: {
ProgressView()
}