A tiny utility I thought you might like: draw a shadow at the top of a scrollable content, when it i...

# compose-desktop

[Alexander Maryanovsky]

A tiny utility I thought you might like: draw a shadow at the top of a scrollable content, when it is being scrolled. Code in thread.

[Alexander Maryanovsky]

/**
 * Draws a top-shadow, proportional (but capped) to the scrolled value.
 */
@Composable
fun ScrollShadow(
    scrollState: ScrollState,
    modifier: Modifier
) {
    val elevation by remember(scrollState) {
        derivedStateOf { (scrollState.value/2).coerceAtMost(3).dp }
    }

    Box(
        modifier
            .height(1.dp)
            .offset(y = (-1).dp)
            .clip(OpenBottomShape)
            .shadow(elevation)
    )
}


/**
 * A shape that clips the box such that only the shadow at the bottom is drawn.
 */
private val OpenBottomShape = GenericShape { size, _ ->
    moveTo(size.width, size.height)
    lineTo(size.width, Float.MAX_VALUE)
    lineTo(0f, Float.MAX_VALUE)
    lineTo(0f, size.height)
}


fun main() = singleWindowApplication {
    Column {
        Text("Header", Modifier.padding(24.dp), style = TextStyle(fontWeight = FontWeight.Bold))

        Box(Modifier.fillMaxSize()) {
            val scrollState = rememberScrollState()

            ScrollShadow(scrollState, Modifier.fillMaxWidth())

            Column(Modifier.verticalScroll(scrollState).fillMaxWidth()) {
                repeat(20) {
                    Text("Item $it", Modifier.padding(16.dp))
                }
            }

            VerticalScrollbar(rememberScrollbarAdapter(scrollState), Modifier.align(Alignment.CenterEnd))
        }
    }
}

[Alexander Maryanovsky]

Looks like this:

Screen Recording 2023-12-18 at 13.40.13.mp4

[Samson Jisso]

Thanks @Alexander Maryanovsky, great one