I’m working on a Jetpack Compose application and need help implementing a feature where additional buttons are loaded when the user scrolls to the bottom of a Column. The number of buttons can vary, from as few as three to many more.
Here’s what I want to achieve:
When the user scrolls to the bottom of the Column, additional buttons are dynamically added.
The user will need to scroll further to activate the trigger that will display more buttons. When scrolling up, the user must close the displayed buttons first before they can continue scrolling the list.
I am using verticalScroll with a Column for vertical scrolling.
How can I implement this behavior? Any advice or examples would be greatly appreciated.
I achieved this option, but I think it’s very bad.
Here is the code I have so far:
@Composable
private fun Layout(
navHostController: NavHostController,
viewModel: ViewModel,
paddingValues: PaddingValues
) {
val context = LocalContext.current
val keyboardController = LocalSoftwareKeyboardController.current
val focusManager: FocusManager = LocalFocusManager.current
val scrollState = rememberScrollState()
val nestedScrollConnection = remember {
object : NestedScrollConnection {
override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
if (available.y < 0 && scrollState.value == scrollState.maxValue) {
viewModel.showUtilits.value = true
} else if (available.y > 0) {
viewModel.showUtilits.value = false
}
return Offset.Zero
}
}
}
LaunchedEffect(scrollState.maxValue) {
if (Int.MAX_VALUE != scrollState.maxValue && viewModel.showUtilits.value) {
scrollState.animateScrollTo(scrollState.maxValue)
}
}
Column(
modifier = Modifier
.padding(paddingValues)
.fillMaxSize()
.nestedScroll(nestedScrollConnection),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(scrollState)
.padding(start = 16.dp, end = 16.dp, bottom = 9.dp, top = 11.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
for (i in 1..3) {
Text("Item $i", modifier = Modifier.padding(16.dp))
}
FullWeightDivider(modifier = Modifier)
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Button(onClick = { /*TODO*/ }) {
Text("Button1", modifier = Modifier.padding(16.dp))
}
AnimatedVisibility(visible = viewModel.showUtilits.value) {
Column {
Button(onClick = { /*TODO*/ }) {
Text("Button invisible", modifier = Modifier.padding(16.dp))
}
Button(onClick = { /*TODO*/ }) {
Text("Button invisible", modifier = Modifier.padding(16.dp))
}
Button(onClick = { /*TODO*/ }) {
Text("Button invisible", modifier = Modifier.padding(16.dp))
}
}
}
}
}
}
}
buttons invisible
buttons visible
Иван Лукин is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.