Vertical | Horizontal | Custom behavior |
---|---|---|
// Your ui state.
val uiState by viewModel.uiState.collectAsState()
FSwipeRefresh(
// Sync ui state in the start direction
isRefreshingStart = uiState.isRefreshing,
// Sync ui state in the end direction.
isRefreshingEnd = uiState.isLoadingMore,
onRefreshStart = {
// Refresh in the start direction.
},
onRefreshEnd = {
// Refresh in the end direction.
},
// ...
) {
LazyColumn {
//...
}
}
// Horizontal orientation.
FSwipeRefresh(
orientationMode = OrientationMode.Horizontal,
// ...
) {
LazyRow {
//...
}
}
It is easy to customize the indicator style, here is a quick sample:
FSwipeRefresh(
indicatorStart = {
// Custom indicator style for the start direction.
CustomizedIndicator()
},
//...
) {
//...
}
@Composable
private fun CustomizedIndicator() {
// Get the FSwipeRefreshState.
val state = checkNotNull(LocalFSwipeRefreshState.current)
// Get the container api which is provided to the indicator.
val containerApi = checkNotNull(LocalContainerApiForIndicator.current)
Box(
modifier = Modifier.fillMaxWidth(),
contentAlignment = Alignment.Center
) {
val text = if (state.isRefreshing) {
"Refreshing..."
} else {
if (containerApi.reachRefreshDistance && state.refreshState == RefreshState.Drag) {
"Release to refresh"
} else {
"Pull to refresh"
}
}
Text(text)
}
}
Well that is it, if you want to learn more about how to customize the indicator style check the
DefaultSwipeRefreshIndicator
ContainerApiForIndicator
Above | Drag |
---|---|
Below | Boundary |
---|---|
val state = rememberFSwipeRefreshState {
// Set indicator mode for the start direction. 'Above' is the default indicator mode.
it.startIndicatorMode = IndicatorMode.Above
// Set indicator mode for the end direction.
it.endIndicatorMode = IndicatorMode.Above
}
FSwipeRefresh(
state = state,
// ...
) {
//...
}
The behavior of IndicatorMode
is controlled by ContainerApiForSwipeRefresh
.
Here is an example of how to customize the indicator mode behavior, click here for details.