How do you make a VStack cover the entire width of the string? Mine seems to have a gap even though I didn't use any styling. Also, does anyone know how to make Swift print all my text and not use an elipses in the titles? Thanks!

Here is the code for my body. All fonts and images have been added/imported to assets.

var body: some View {
        VStack(){
//            Text(article.titleText)
//            Text(article.siteText)
//            Text(article.tickerText)
//            Text(article.dateText)
//            AsyncImage(url: article.imageURL) {image in
//                image.resizable()
//                    .aspectRatio(contentMode: .fit)
//                        .frame(width: 64)
//            } placeholder: {
//                ProgressView()
//            }
            HStack(spacing: 16){
                VStack(alignment: .leading, spacing: 4){
                    Text(article.siteText)
                        .font(Font.custom("Inter-Regular.ttf", size: 12))
                    Text(article.titleText)
                        .font(Font.custom("Inter-SemiBold.ttf", size: 20))
                        .frame(width: 247)
                        .padding([.bottom], 4)
                    HStack(spacing: 10){
                        Text(article.dateText)
                            .font(Font.custom("Inter-Regular.ttf", size: 12))
                        Image("rect")
                        Text(article.tickerText)
                        Image("green")
//                            .padding([.leading, .trailing], -8)
                        Text("2.33%")
                            .foregroundColor(Color(red: 0.345, green: 0.50, blue: 0.155, opacity: 1.0))
                    }

                }
                AsyncImage(url: article.imageURL) {image in
                    image.resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 64, height: 64)
                        .cornerRadius(20)
                } placeholder: {
                    ProgressView()
                }
            }
            Image("rect-hor")
        }
        
    }

CodePudding user response：

The problem is that you're modifying the Text view that holds your article.titleText with .frame(width: 247).

Removing this modifier should fix your problem.

CodePudding user response：

You need to have the contents of the VStack covering the full width: you can add one Spacer() on each end of your HStack.

            HStack(spacing: 16){

                // This Spacer() will push the contents to the right
                Spacer()

                VStack(alignment: .leading, spacing: 4){
                    // VStack content
                }
                AsyncImage // Your image

                // This Spacer() will push the contents to the left,
                // so your content will be centered and the
                // HStack will be occupying the whole width
                Spacer()

            }