[Paywalls] Remove lazy stack usages and fix alignment issues #4514
Conversation
…istribution is start, center, end, and flex stacks when distribution is spaceBetween, spaceAround, spaceEvenly.
… view if it has fixed size.
| if index < self.componentViewModels.count - 1 { | ||
| Spacer() | ||
| } | ||
| Spacer(minLength: 0) |
There was a problem hiding this comment.
Fixed the spaceAround flex layout: each items has one spacer on each side, so there is two spacers between items and one at the start/end.
In contrast, spaceEvenly has one spacer between items, as well as one spacer at the start/end.
| HStack(alignment: verticalAlignment.stackAlignment, spacing: style.spacing) { | ||
| case .normal: | ||
| HStack( | ||
| // This alignment positions inner items vertically relative to each other |
There was a problem hiding this comment.
This is alignment number 3: Align yellow boxes to the top within each other.
| ComponentsView(componentViewModels: self.viewModels, onDismiss: self.onDismiss) | ||
| } | ||
| // This alignment positions the items horizontally within its parent |
There was a problem hiding this comment.
This is alignment number 2: Align yellow boxes to the left of the green box.
| @@ -76,6 +77,7 @@ struct StackComponentView: View { | |||
| viewModels: self.viewModel.viewModels, | |||
| onDismiss: self.onDismiss | |||
| ) | |||
| // This alignment positions the inner HStack vertically. | |||
There was a problem hiding this comment.
This is alignment number 1: Align green box to the top of the red box
| return .normal | ||
| case .fill, .fixed: | ||
| case .spaceBetween, .spaceAround, .spaceEvenly: | ||
| return .flex |
There was a problem hiding this comment.
Flex stacks support .start, .center, .end distribution as well, so we could perfectly remove usages of VStack/HStack and leave just FlexVStack/FlexHStack.
However, the view structure of the latter are a bit more complex/nested than the simple stacks, so I've opted to keep them for now.
Cramped three related things together in this PR:
Spacerto zero: otherwise, there is a minimum size that depends on the platform but it's > 0 and could make a view overflow its parent if has fixed size and the sum of its child views + spacers exceeds it.LazyVStackandLazyHStack: they cannot have a child view with width/height typefillbecause the lazy rendering makes it impossible to know how much space they can occupy. There is not much potential for performance wins since the paywalls should be static and not have a lot of scrolling.3 alignments are needed to achieve this layout:
1- Align green box to the top of the red box
2- Align yellow boxes to the left of the green box.
3- Align yellow boxes to the top within each other.
I added code level comments to clarify what each alignment is doing, and PR comments on the lines where each of these three alignments are performed for extra clarity.