将前缘边框应用于重复的视图，高度可变

Question

我刚刚从Webdev背景开始使用SwiftUI。我正在尝试通过使用HStack作为第一个元素来对Rectangle应用前导边框。 HStack的内容由于文本包装（lineLimit = 2）而具有可变的高度，我似乎无法使边框很好地播放并采用其相邻VStack的高度。这是一张图片（下面的代码）

HStack(alignment: .top, spacing: 0) {
    Rectangle().fill(accentColor).frame(width: 2.0)
        .fixedSize(horizontal: false, vertical: false)
    VStack(alignment: .leading) {
        Text(communityName.uppercased())
            .font(.custom("Raleway-Regular", size: 10))
            .foregroundColor(Color(.sRGB, red: 0.4, green: 0.4, blue: 0.4))
            .kerning(1.2)
            .padding(.top, 20)
        Text(name)
            .font(.custom("DMSerifDisplay-Regular", size: 20))
            .foregroundColor(Color(.sRGB, red: 0.2, green: 0.2, blue: 0.2))
            .lineLimit(2)
            .fixedSize(horizontal: false, vertical: true)
    }
    .padding(.leading, 10.0)
    Spacer()
    
}
.padding(7.0)
.background(Color(.sRGB, red: 0.969, green: 0.969, blue: 0.969))

消费者查看代码：

ForumResultRow(name: "Bathrooms & Laundry", communityName: "Homeone", accentColor: Color.orange)
ForumResultRow(name: "Investor Stories & Showcase + Property Market Economics", communityName: "PropertyChat", accentColor: Color.blue)
ForumResultRow(name: "Bathrooms & Laundry", communityName: "Homeone", accentColor: Color.orange)

似乎在渲染同一视图的多个视图时，边框将对所有与最短实例中的高度相同的高度使用相同的高度。有关如何使其正常运行的任何提示？

Answer 1

这是一个解决方案。使用Xcode 11.4 / iOS 13.4进行了测试

var body: some View {
    HStack(alignment: .top, spacing: 0) {
        VStack(alignment: .leading) {
            Text(communityName.uppercased())
                .font(.custom("Raleway-Regular", size: 10))
                .foregroundColor(Color(.sRGB, red: 0.4, green: 0.4, blue: 0.4))
                .kerning(1.2)
                .padding(.top, 20)
            Text(name)
                .font(.custom("DMSerifDisplay-Regular", size: 20))
                .foregroundColor(Color(.sRGB, red: 0.2, green: 0.2, blue: 0.2))
                .lineLimit(2)
                .fixedSize(horizontal: false, vertical: true)
        }
        .padding(.leading, 10.0)
        Spacer()
    }
    .overlay( 
       Rectangle().fill(accentColor).frame(width: 2.0),     // << here !!
       alignment: .leading)
    .padding(7.0)
    .background(Color(.sRGB, red: 0.969, green: 0.969, blue: 0.969))

}