bevy
bevy copied to clipboard
Fix scrolling in UI example
Objective
Fixes #8056 Alternative to #8061
Solution
Prior to this PR, the inner container was being constrained to the height of the outer container. The scroll range was being determined by the inner container's height and a sum obtained by iterating over every list item in the container.
With this PR, I let the inner container stretch to the height of its contents. The scroll range is simple to get from the outer and inner container heights.
I'm not sure why it was implemented this way, but it's possible that this was working around a very old stretch/taffy bug or something.
There's some additional explanation of what is going on and why the old implementation worked in Bevy 0.9 but not Bevy 0.10 in #8061.
Before After
┌─────Container─────┐ ┌─────Container─────┐
│ ┌─ScrollingList─┐ │ │ ┌─ScrollingList─┐ │
│ │ Item 1 │ │ │ │ Item 1 │ │
│ │ Item 2 │ │ │ │ Item 2 │ │
│ │ Item 3 │ │ │ │ Item 3 │ │
│ │ Item 4 │ │ │ │ Item 4 │ │
└─┴───────────────┴─┘ └─┼───────────────┼─┘
Item 6 │ Item 6 │
Item 7 │ Item 7 │
Item 8 │ Item 8 │
└───────────────┘
This also cleans up a few unnecessary styles.
This implementation of a ScrollView looks non-ideal as it seems that it will cause a relayout on every scroll position change.
I think this is probably as good as it gets in "user approachable example code," right now, right? Or do we have some way of offsetting a UI node without causing a relayout (other than modifying the GlobalTransform in PostUpdate)?
I think this is probably as good as it gets in "user approachable example code," right now, right?
Probably. I'm not really familiar with Bevy's rendering code. But this really ought to be built-in. In which case we could probably do something better.