State of Compose 2023 results are in! Click here to learn more

← Back to Foundation

ScrollableColumn

Component
in
Foundation
. Since 0.1.0-dev15

Overview

Code Examples

Variation of Column that scrolls when content is bigger than its height.

The content of the ScrollableColumn is clipped to its bounds.

@param modifier modifier for this ScrollableColumn @param scrollState state of the scroll, such as current offset and max offset @param verticalArrangement The vertical arrangement of the layout's children @param horizontalAlignment The horizontal alignment of the layout's children @param reverseScrollDirection reverse the direction of scrolling, when true, ScrollState .value = 0 will mean bottom, when false, ScrollState.value = 0 will mean top @param isScrollEnabled param to enable or disable touch input scrolling. If you own ScrollState, you still can call ScrollState.smoothScrollTo and other methods on it. @param contentPadding convenience param to specify padding around content. This will add padding for the content after it has been clipped, which is not possible via modifier param

Overloads

ScrollableColumn

@Composable
@Deprecated(
    "Prefer to use LazyColumn instead. Or you can use Column(Modifier.verticalScroll" +
        "(rememberScrollState()) if your scrolling content is small enough.",
    ReplaceWith(
        "LazyColumn(modifier = modifier, contentPadding = contentPadding, " +
            "reverseLayout = reverseScrollDirection, horizontalAlignment = horizontalAlignment) {" +
            "\n // use `item` for separate elements like headers" +
            "\n // and `items` for lists of identical elements" +
            "\n item (content)" +
            "\n }",
        "androidx.compose.foundation.lazy.LazyColumn"
    )
)
fun ScrollableColumn(
    modifier: Modifier = Modifier,
    scrollState: ScrollState = rememberScrollState(0f),
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    reverseScrollDirection: Boolean = false,
    isScrollEnabled: Boolean = true,
    contentPadding: PaddingValues = PaddingValues(0.dp),
    content: @Composable ColumnScope.() -> Unit
)

Parameters

NameDescription
modifiermodifier for this ScrollableColumn
scrollStatestate of the scroll, such as current offset and max offset
verticalArrangementThe vertical arrangement of the layout's children
horizontalAlignmentThe horizontal alignment of the layout's children
reverseScrollDirectionreverse the direction of scrolling, when true, ScrollState .value = 0 will mean bottom, when false, ScrollState.value = 0 will mean top
isScrollEnabledparam to enable or disable touch input scrolling. If you own ScrollState, you still can call ScrollState.smoothScrollTo and other methods on it.
contentPaddingconvenience param to specify padding around content. This will add padding for the content after it has been clipped, which is not possible via modifier para