SwiftUI中如何让左侧矩形与文本VStack高度自适应匹配？

要让左侧蓝色矩形高度完全匹配右侧文本区域的高度，核心是让矩形高度与文本区域高度绑定，无需固定数值，以下两种方法均可实现：

方法一：利用HStack填充高度 #

将矩形高度设为.infinity，使其自动填充所在HStack的高度（HStack高度由右侧文本VStack决定）：

VStack(alignment: .leading){
    VStack{
        HStack(alignment: .top) {
            Rectangle()
                .fill(Color.blue) // 直接填充颜色，替代background写法
                .frame(width: 6, height: .infinity) // 高度设为无穷大，贴合HStack高度
            VStack(alignment: .leading, spacing: 2) {
                Text("test")
                    .foregroundColor(.green)
                    .padding(.leading, 2)
                
                Text("long or short text that can wrap multiple lines if needed")
            }
            .padding(.vertical, 4)
        }
        .frame(width: 255, alignment: .leading)
        .background(Color.black.opacity(0.12))
        .cornerRadius(12)
        .padding(.trailing, 10)
        .padding(.leading, 14)
        .padding(.top, 6)
    }
}

方法二：将细线作为文本区域背景 #

把蓝色矩形作为文本VStack的背景，完全绑定文本区域高度（包括padding）：

VStack(alignment: .leading){
    VStack{
        HStack(alignment: .leading) {
            VStack(alignment: .leading, spacing: 2) {
                Text("test")
                    .foregroundColor(.green)
                    .padding(.leading, 2)
                
                Text("long or short text that can wrap multiple lines if needed")
            }
            .padding(.vertical, 4)
            .padding(.leading, 8) // 预留蓝色条的位置
            .background(
                HStack {
                    Rectangle()
                        .fill(Color.blue)
                        .frame(width: 6)
                    Spacer()
                }
            )
        }
        .frame(width: 255, alignment: .leading)
        .background(Color.black.opacity(0.12))
        .cornerRadius(12)
        .padding(.trailing, 10)
        .padding(.leading, 14)
        .padding(.top, 6)
    }
}

关键说明 #

• 避免用.background(Color.blue)给Rectangle设置颜色：Rectangle本身是形状，直接用.fill()更准确。
• 两种方法都无需固定高度，会自动根据文本长度（包括换行）调整细线高度。

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