
This article will show you how to make the jetpack compose scrollable column. Refer to Jetpack compose articles to see other concepts.But you are missing functionality that you will eventually require.What happens if you need to display more elements on your screen?These elements may be all assembled, but you are unable to see all of them due to the small screen.You may want to add infinite numbers of elements to the screen dynamically and still be able see all.
This problem can be solved by allowing your content scroll horizontally or vertically.This feature can be implemented usingScrollView
. It allows vertical scrolling.For horizontal scrolling, you useHorizontalScrollView
.Each can only have one child view within them. To add multiple elements to them, you will need to use a single layout to wrap them.
Jetpack Compose offers a new way for you to achieve the same result using scrollable, lazily constructed containers.
This chapter will show you how to create lists and grids with Jetpack Compose. These will help you to fit all your content onto the screen.This chapter will show you how to display content horizontally or vertically, and how to create an alternative to theRecyclerView
by using composable operations.
jetpack compose scrollable column
2.Jetpack makes column
AColumnlayout is one that allows you to place your children vertically.By default,Columnitems do not scroll.
@Composable fun ScrollableColumn() { Column { Text("Codeplayon ") Text("Codeplayon simple learning mobile. Code and lean share and explore new tech") } }
2.1.Scrollable Column Jetpack Compose
Themodifierslet you decorate or configure a composable.You can use theverticalScroll()
modifier to create aScrollable Column.
If the maximum height constraint is exceeded, then theColumn
contents would scroll vertically.
Column( modifier = Modifier .verticalScroll(rememberScrollState())) { Text("Codeplayon") Text("Codeplayon learn share and expolre new rech stack android studio, flutter , jetpcak compose.") }
Modifier for verticalScroll 2.2
The VerticalScroll Modifier allows the user to scroll elements whose bounds exceed their maximum size limits.
To determine the initial scroll position, it takes as an argument theScrollState
.ThisScrollState
object allows developers to modify the scroll position and get the current scrolling status by calling methods.
ThescrollTo
method of theallows for you to jump to the desired position (in pixels) instantly.
val scrollState = rememberScrollState() scrollState.scrollTo(scrollState.value - 1000)
TherememberScrollState
creates scroll states based on scroll configuration. It handles scroll behavior during recomposition to ensure that the position does not get lost.
The following parameters are required for a verticalScroll modifier:
ScrollState
scroll position (scroll position).enabled
: Should scrolling be enabled via touch input?FlingBehavior
After drag is finished with velocityreverseScrolling
: reverse scrolling.
3.Conclusion
We have figured out how to make the Jetpack’sColumn
scrollable using theverticalScroll
mod.
Read More Tutorial