当我将 swiftui 和矩形和文本并排放置时，我在设计时遇到了困难

Question

    VStack(alignment: .leading){
        VStack{
            HStack{
                Rectangle().background(Color.blue).frame(width: 6)
                VStack(alignment: .leading,spacing: 2) {
                   Text("test")
                       .foregroundColor(.green)
                       .padding(.leading, 2)
                   
                   Text("long or short text")
                }.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 中文本值的高度相同，即一条细线向左对齐，但我试图在推出视图中推入矩形。我不知道还有什么其他方法可以让它发挥作用。

其实

Rectangle().background(Color.blue).frame(width: 6) 
Rectangle().background(Color.blue).frame(width: 6,height: (VStack , texts height)) 

不知道文字要多长 或者还有其他办法吗？

Answer 1

尝试将左侧的栏移动到叠加层。像这样的东西（你可能想调整填充）：

var body: some View {
    VStack(alignment: .leading,spacing: 2) {
        Text("test")
            .foregroundColor(.green)
            .padding(.leading, 2)

        Text("long or short text")
    }
    .padding(.vertical, 4)
    .padding(.leading, 20) // Reserve space for the overlay
    .overlay(alignment: .leading) {
        Color.blue.frame(width: 6)
    }
    .frame(width: 255, alignment: .leading)
    .background(Color.black.opacity(0.12))
    .cornerRadius(12)
}