SwiftUI Text导致布局不对齐的问题

问题描述

这是一个Group，其中通过HStack包裹的图片和文字，图片大小都是一致的。

Group {
    // 储蓄愿望
    HStack(alignment: .center) {
        Image("savingswishes")
            .frame(width: 50,height: 50)
        Spacer().frame(width: 10)
        VStack(alignment: .leading){
            ...
        }
    }
    // 记录生活
    HStack(alignment: .center) {
        Image("recordlife")
            .frame(width: 50,height: 50)
        Spacer().frame(width: 10)
        VStack(alignment: .leading){
            ...
        }
    }
    // 汇总账单
    HStack(alignment: .center) {
        Image("summarizebills")
            .frame(width: 50,height: 50)
        Spacer().frame(width: 10)
        VStack(alignment: .leading){
            ...
        }
    }
}
.frame(width: 300)

但是在SwiftUI中实现时，最后的汇总账单发送的偏移，可以看出显著的偏右。

经过测试发现可能是 文本内容的宽度或布局规则 导致的。由于 Text 的内容（特别是字符串的长度）不同，系统可能自动调整布局，导致对齐出现偏差。

解决方案

第三个 Text 的描述文字可能比前两个更长或更短，因此 VStack 的宽度变得不一致，导致整个 HStack 向右偏移。

解决方法：

给每个 Text 或 VStack 设置明确的宽度：

VStack(alignment: .leading) {
    Text("Summarize Bills")
        .fontWeight(.semibold)
        .frame(maxWidth: .infinity, alignment: .leading) // 固定宽度
    Spacer().frame(height: 5)
    Text("Query and count every record, and use visual charts to show your wealth.")
        .foregroundColor(.gray)
        .frame(maxWidth: .infinity, alignment: .leading) // 固定宽度
}

将Text设置明确的宽度后，问题得到解决：

可以看到，列表左侧都已经对齐了，问题得到解决。