[ad_1]
I am attempting to make an horizontal scrollable element (HScroll) inside a vertical scrollable one(one thing just like the AppStore display however with extra constraints). The constraints are:
- Contained in the HScroll the merchandise width is relative to it is father or mother width (father or mother width – X)
- The merchandise contained in the HScroll has a dynamic top so the HScroll ought to have a dynamic top
This can be a code pattern on how I am attempting to implement it (contained in the vertical ScrollView there may be different parts)
ScrollView(.vertical, showsIndicators: false) {
GeometryReader { geo in
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(playing cards) { card in
HStack(alignment: .heart) {
card.picture
VStack(alignment: .main) {
Textual content(card.title)
Textual content(card.description)
}
}
}
.body(width: geo.dimension.width - 32)
}
}
}
}
My drawback right here is that if I am utilizing the GeometryReader then the HScroll will all the time be cropped vertically and if I add scaleToFill() or scaleToFit() to the GeometryReader it would get a top greater than wanted (top shall be equal to width). If I do not use the GeometryReader I cannot get the merchandise wanted width (it would match its content material).
If there may be some other approach to get the father or mother width with out utilizing GeometryReader or to resize a baby merchandise relative to it is father or mother it will likely be useful additionally.
[ad_2]
