Home > Blockchain >  How can I right-align images within an outer HStack? — Swift
How can I right-align images within an outer HStack? — Swift

Time:04-06

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