如何让 VStack 覆盖整个屏幕宽度

Question

如何让 VStack 覆盖字符串的整个宽度？即使我没有使用任何样式，我的似乎也有差距。另外，有谁知道如何让 Swift 打印我所有的文本而不在标题中使用省略号？谢谢！

这是我的 body 的代码。所有字体和图像都已 added/imported 到资产。

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

Answer 1

问题是您正在修改包含 article.titleText 的 Text 视图和 .frame(width: 247)。

删除此修饰符应该可以解决您的问题。

Answer 2

您需要 VStack 的内容覆盖整个宽度：您可以在 HStack 的每一端添加一个 Spacer()。

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

            }

如何让 VStack 覆盖整个屏幕宽度

How to make VStack cover entire width of screen

swift

swiftui