Apply leading edge border to repeated view, variable height

Question

I've just started with SwiftUI coming from a webdev background. I'm trying to apply a leading border to a HStack by using a Rectangle as the first element. The contents of the HStack are variable height due to text-wrapping (lineLimit = 2) and I can't seem to get the border to play nice and adopt the height of its neighbouring VStack. Here's an image (code below)

Wonky borders

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))

And the consumer view code:

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)

It seems that when rendering multiple of the same view, the border will use the same height for all that is equal to the height in the shortest instance. Any tips on how to get this to behave properly?

does this answer your question? https://stackoverflow.com/questions/56505043/how-to-make-view-the-size-of-another-view-in-swiftui — ryandu, Jul 17 '20 at 02:06
The provided code works fine. Tested with Xcode 11.4 and Xcode 12. Is this all your real code? Didn't you limit somewhere else frame height? — Asperi, Jul 17 '20 at 04:09
@Asperi - I should mention these items are inside a scrollview — Matty F, Jul 17 '20 at 05:05

score 3 · Accepted Answer · answered Jul 17 '20 at 05:14

Here is a solution. Tested with 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))

}

Thanks @Asperi! I was also watching some great swiftui videos on YouTube and realized it will need to be implemented as a modifier view so it can know the height of the VStack before rendering. I don’t think there’s anything in SwiftUI where you can have sibling height matching a la CSS flex stretch alignment. Thanks again :) — Matty F, Jul 18 '20 at 22:48

Apply leading edge border to repeated view, variable height

1 Answers1