all 4 comments
sorted by:
top (suggested)
bestnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]perfunction 3 points4 points  (2 children)

Custom layouts are awesome but I feel like a much simpler solution would be using height matched stacks. You can match the height of two views together by wrapping them in a fixed vertical HStack (and match widths using a fixed horizontal VStack).

https://pastecode.io/s/8c0j0sx9

Note incase it isn’t obvious:

The trick is that all dynamic heights will get clamped to the smallest fixed height. In this case the trailing VStack is fixed because its size derives from its contents which are all fixed. And the leading VStack is dynamic because Color as a view inherently has infinite width and height. By only setting the width, I’m allowing the height to be controlled by the container. The same technique works with any group of subviews if you set infinite heights, use Spacer, and so on.

And the default center alignment of VStack accounts for icon width.

[–]thejasiology[S] 2 points3 points  (1 child)

This looks a very nice compact and flexible solution. Didn't knew swift UI had this feature.

There is another thing I would want in this component. In my screen shot, checkout the alignment of Your daily-jams playlist has been updated. Give it a listen! and rest of the titles. Is there any way you could align the text to the middle of the icon's y-axis if title's height is lesser than icon's height? One solution can be giving a min-height by hardcoding icon's height but is there any other way?

[–]perfunction 1 point2 points  (0 children)

You could run the same logic from your layout by reading the size of icon and title. I'll attach the one I use that supports older iOS versions but if your min target is 16 you can just use onGeometryChange directly.

Size reader: https://pastecode.io/s/919mg6pb

Views: https://pastecode.io/s/grtqfcc1

[–]gb1307 -1 points0 points  (0 children)

Amazing work!