How can I draw a dividers between `Column` childre...
# compose
g
How can I draw a dividers between
Column
children?
p
Invoke the
Divider()
composable between each child.
g
Ah right. In my case i let callers of a custom composable specify the children of its internal
Column
. Then I want my custom composable to be able to add dividers in between each child. Maybe I need a custom Layout for this though
p
Are you not using
LazyColumnFor
?
g
Nah, just the regular one
p
It may be possible to do what you're describing, but I don't know enough about the more advanced APIs.
👍 1
z
You’d probably need to do something like the old Table composable did for borders. Use a custom layout to measure and save where the spaces in between items are, then use something like the
drawContent
modifier to draw over/under the children in those spaces. If all your items are the same size, you can use the
spacedBy
arrangement with Column and just calculate where the dividers go without doing a custom layout.
👀 1
g
Thanks Zach, I’ll give that a try. Any idea where I could find that Table composable by any chance? (I’m assuming it doesn’t exist anymore.)
z
g
thanks, this should help a lot 🙏
z
The main issue with that approach is that the first frame is rendered without the dividers unfortunately (i think this is one of the reasons why they removed the old Table composable)
g
maybe i need to re-think my component 🤔
So is this implementation drawing dividers based on the previous round's measurements? Couldn't those have changed?
Maybe I could use a mutable "out" array for storing the item heights, tho I feel like that's a bit hacky
z
If the measurements change on every frame (e.g. during animation), then yea the dividers will lag by a frame unfortunately.
👍 1
This feels like it might be overkill, but another path you might want to explore is writing a custom SubcomposeLayout. There’s probably a way to use that to avoid the frame off-by-one issue.
l
Yes,
SubcomposeLayout
is designed exactly for these sort of use cases - you can avoid the 1f lag this way by measuring the content first, and then composing the dividers afterwards.
👍 3
g
Neat, TIL. It's well past my ability to write code tonight, but i'll read up on
SubcomposeLayout
tomorrow. Thanks both!
e
@Louis Pullen-Freilich [G] Any docs on how to understand and use
SubcomposeLayout
?
z
both
LazyList
and
WithConstraints
use it, which are pretty different use cases so looking at their implementations is helpful.
l
You can take a look at the sample in the documentation, otherwise yes
LazyList
and
WithConstraints
can be useful. Or for a more high level 'component' point of view, you can see the
TabRow
implementation, or the upcoming Scaffold change that moves to using
SubcomposeLayout
g
cool,
TabRow
is doing dividers too, so this makes things pretty easy for me 🙂
SubcomposeLayout
(and
Layout
) are so easy to use 👏. I managed to add my dividers fairly easily: https://gist.github.com/grandstaish/9eec95d879eb754cb5109caa49822dce
🎉 2
e
Possible to add a screenshot of the final result to the gist?
1
g
Sure!
Still has a long way to polish the component, but the general idea is there. I think it’s pretty awesome that i can dynamically add more composables (the dividers) after measuring the content
147 Views