SwiftUI中如何让VStack内文本始终左对齐？

问题出在中间VStack外层的.frame(maxWidth: .infinity)上——这个frame默认对齐方式为居中，即便VStack内部设置了.leading对齐，整个VStack仍会在HStack的可用空间里居中，导致短文本看起来未左对齐。

只需给该frame添加alignment: .leading参数，就能让VStack始终靠左，内部文本自然保持左对齐：

struct GeneralTest: View {
    let fruits = ["Apple", "Oranges from Californ"]
    
    var body: some View {
        List {
            ForEach(fruits, id: \.self) { fruit in
                HStack{
                    Image(systemName: "pencil.circle.fill")
                        .frame(width: 65)
                        .foregroundColor(.blue)
                        .background(.yellow)
                    
                    VStack(alignment: .leading){
                        Text(fruit)
                            .font(.title3)
                            .foregroundColor(Color.blue)
                        
                        VStack(alignment: .leading) {
                            Text("Some text")
                                .foregroundColor(Color.gray)
                                .font(.caption)
                            Text("Some text:")
                                .foregroundColor(Color.gray)
                                .font(.caption)
                            Text("Some Text:")
                                .foregroundColor(Color.gray)
                                .font(.caption)
                        }
                    }
                    // 添加alignment: .leading，强制VStack靠左
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(.yellow)
                    
                    Button{
                        
                    }label:{
                        Image( systemName: "circle.hexagongrid.circle")
                            .padding()
                            .background(Color.yellow)
                            .foregroundColor( Color.blue)
                            .cornerRadius(30)
                            .overlay(
                                Circle()
                                    .stroke( Color.gray, lineWidth: 0.5)
                            )
                    }
                    NavigationLink(destination: SomeView()){
                        
                    }
                    .frame(maxWidth: 10)
                }
            }
        }
        .background(Color.pink)
        .listStyle(GroupedListStyle())
    }
}

另外，你可以合并内层嵌套的VStack，简化代码结构：

VStack(alignment: .leading){
    Text(fruit)
        .font(.title3)
        .foregroundColor(Color.blue)
    
    Text("Some text")
        .foregroundColor(Color.gray)
        .font(.caption)
    Text("Some text:")
        .foregroundColor(Color.gray)
        .font(.caption)
    Text("Some Text:")
        .foregroundColor(Color.gray)
        .font(.caption)
}
.frame(maxWidth: .infinity, alignment: .leading)
.background(.yellow)

修改后，无论文本长度如何，内容都会始终靠左对齐，达到你想要的效果。

内容的提问来源于stack exchange，提问作者fs_tigre