Background
I am making a desktop compose application.
I had a LazyColumn
with Divider
separating items. LazyColumn
's width may not fit in window so I made the LazyColumn
horizontally scrollable by enclosing it inside a Box
with horizontalScroll()
modifier set.
Now LazyColumn
became horizontal scrollable as well. But strangely the Divider
's separating the items disappeared.
After digging into it for a while, I figured out that Divider
's became invisible only when placed inside a horizontally scrollable parent.
Minimal Reproduction
Here is a minimal reproduction of observed behavior where red Divider
is clearly invisible when horizontalScroll(rememberScrollState())
modifier is set in enclosing Box
.
fun main() = application {
Window(onCloseRequest = ::exitApplication) {
Box(
Modifier.fillMaxSize()
.background(Color.Green)
.horizontalScroll(rememberScrollState())
) {
Divider(thickness = 10.dp, color = Color.Red)
}
}
}
As it can be seen that the red Divider
is invisible for above code.
Expected Output:
With verticalScroll()
or no scroll modifier at all works fine as expected.
fun main() = application {
Window(onCloseRequest = ::exitApplication) {
Box(
Modifier.fillMaxSize()
.background(Color.Green)
.verticalScroll(rememberScrollState())
) {
Divider(thickness = 10.dp, color = Color.Red)
}
}
}
Correct output as expected, the red Divider
is clearly visible for above code.
Version info
kotlin("jvm") version "1.5.21"
id("org.jetbrains.compose") version "1.0.0-alpha3"
I'd like to know if this is a bug? or is there a way to fix this.
No, this is not a bug.
Divider
is used to take the full width, just like any other view with thefillMaxWidth()
modifier.But inside
horizontalScroll
this modifier is ignored because it is ambiguous:horizontalScroll
wraps the size of the content, so themaxWidth
constraint in this area is infinite.From
fillMaxWidth
documentation:I haven't found any documentation mentioning
horizontalScroll
effectsConstraints
, you can see maintainer's answer on the same issue, or you can test it by yourself like this:In this case you need to specify the width explicitly, e.g:
Note that when the top part of your
LazyColumn
is smaller than the bottom one, as in my example, the width will be smaller at first (to accommodate only the visible part), but after scrolling down and back up, the width will not be restored to its original width because theDivider
width modifier will not let it shrink back down. If you need to prevent this, you need to calculate the `width' based only on the visible elements, which is more complicated.