https://kotlinlang.org logo
Title
d

Dirk Hoffmann

01/26/2021, 12:14 PM
short question: how do I get horizontal/vertical scrollbar to get displayed ... I can scroll, but the scrollbar itself is never visible:
@Composable
fun AppRight(modifier: Modifier = Modifier) {
    Box(modifier.fillMaxSize()) {
        val verticalScrollState = rememberScrollState(0f)

        ScrollableColumn(scrollState = verticalScrollState) {
            LoremIpsum()
            LoremIpsum()
        }
        VerticalScrollbar(adapter = rememberScrollbarAdapter(verticalScrollState))
    }
}
i

Igor Demin

01/26/2021, 12:26 PM
Scrollbar is visible only if the content height is greater than the container height.
@Composable
fun AppRight(modifier: Modifier = Modifier) {
    Box(modifier.fillMaxSize()) {
        val verticalScrollState = rememberScrollState(0f)
        ScrollableColumn(scrollState = verticalScrollState) {
            Box(Modifier.width(100.dp).height(3000.dp).background(Color.Green))
        }
        VerticalScrollbar(
            adapter = rememberScrollbarAdapter(verticalScrollState),
            modifier = Modifier.align(Alignment.CenterEnd)
        )
    }
}
d

Dirk Hoffmann

01/26/2021, 12:33 PM
so how would I tell it that the available height is the "maxHeight" that the box can get??
meaning: "show a scrollbar if the necessary needed height (whatever that may be) is greater than the visible height ?
ah, got it, just not giving any height() at all does the trick
and on "when is paint time" for a component:
@Composable
fun AppRight(modifier: Modifier = Modifier) {
    val verticalScrollState = rememberScrollState(0f)
    val horizontalScrollState = rememberScrollState(0f)
    Box(modifier.fillMaxSize()) {
        ScrollableRow(scrollState = horizontalScrollState) {
            ScrollableColumn(scrollState = verticalScrollState) {
                LoremIpsum(Modifier.fillMaxWidth())
                Box(Modifier.height(50.dp).width(50.dp).background(Color.Green))
                Box(Modifier.height(50.dp).fillMaxWidth().background(Color.Magenta))
                LoremIpsum(Modifier.fillMaxWidth())
            }
        }
        VerticalScrollbar(
            adapter = rememberScrollbarAdapter(verticalScrollState),
            modifier = Modifier.align(Alignment.CenterEnd)
        )
        HorizontalScrollbar(
            adapter = rememberScrollbarAdapter(horizontalScrollState),
            modifier = Modifier.align(Alignment.BottomEnd)
        )
    }
}
I can see the green Box, but cannot see the Magenta Box ... why is that???
hmmm, so the Magenta Box is there, but with width 0.dp this makes it visible
Box(Modifier.height(50.dp).defaultMinSizeConstraints(50.dp).background(Color.Magenta))
but why
fillMaxWidth()
doesn't do its job??
i

Igor Demin

01/26/2021, 1:56 PM
but why 
fillMaxWidth()
 doesn't do its job??
Any content placed inside ScrollableRow has unrestricted width