'How to make VStack cover entire width of screen

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 what I mean

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")
        }
        
    }

swift swiftui

Solution 1:^[1]

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.

Solution 2:^[2]

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()

            }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Alexander Sandberg
Solution 2	HunterLion

'How to make VStack cover entire width of screen

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]