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

← Back to Foundation

ScrollableRow

Component
in
Foundation
. Since 0.1.0-dev15

Overview

Code Examples

Variation of Row that scrolls when content is bigger than its width.

The content of the ScrollableRow is clipped to its bounds.

@param modifier modifier for this ScrollableRow @param scrollState state of the scroll, such as current offset and max offset @param horizontalArrangement The horizontal arrangement of the layout's children @param verticalAlignment The vertical alignment of the layout's children @param reverseScrollDirection reverse the direction of scrolling, when true, ScrollState .value = 0 will mean right, when false, ScrollState.value = 0 will mean left @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

ScrollableRow

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

Parameters

NameDescription
modifiermodifier for this ScrollableRow
scrollStatestate of the scroll, such as current offset and max offset
horizontalArrangementThe horizontal arrangement of the layout's children
verticalAlignmentThe vertical alignment of the layout's children
reverseScrollDirectionreverse the direction of scrolling, when true, ScrollState .value = 0 will mean right, when false, ScrollState.value = 0 will mean left
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 param