UltraSwipeRefresh is a Compose component that supports both pull-to-refresh and pull-to-load-more gestures. It is designed as a more feature-rich and extensible replacement for the official SwipeRefresh.
To use it, you need to manage its state using rememberUltraSwipeRefreshState() and provide callbacks for onRefresh and onLoadMore.
Key parameters include:
state: The state object used to control and observe refresh/load-more status.onRefresh: Callback triggered when the pull-to-refresh gesture completes.onLoadMore: Callback triggered when the pull-to-load-more gesture completes.headerIndicator: The UI component displayed during pull-to-refresh.footerIndicator: The UI component displayed during pull-to-load-more.onCollapseScroll: An optional callback used to synchronize list position when the header/footer collapses, helping to eliminate visual bounce.headerScrollMode / footerScrollMode: Defines the sliding mode (e.g., NestedScrollMode.Translate).
Tip: For the best sliding experience, always pair headerIndicator/footerIndicator with headerScrollMode/footerScrollMode.
@Composable
fun UltraSwipeRefreshSample() {
val state = rememberUltraSwipeRefreshState()
var itemCount by remember { mutableIntStateOf(20) }
val coroutineScope = rememberCoroutineScope()
val lazyListState = rememberLazyListState()
UltraSwipeRefresh(
state = state,
onRefresh = {
coroutineScope.launch {
state.isRefreshing = true
// TODO: Refresh logic
delay(2000)
itemCount = 20
state.isRefreshing = false
}
},
onLoadMore = {
coroutineScope.launch {
state.isLoading = true
// TODO: Load more logic
delay(2000)
itemCount += 20
state.isLoading = false
}
},
modifier = Modifier.background(color = Color(0x7FEEEEEE)),
headerScrollMode = NestedScrollMode.Translate,
footerScrollMode = NestedScrollMode.Translate,
onCollapseScroll = {
// it < 0: triggered by pull-to-refresh collapsing
// it > 0: triggered by pull-to-load-more collapsing
if (it > 0) {
lazyListState.animateScrollBy(it)
}
},
headerIndicator = {
ClassicRefreshHeader(it)
},
footerIndicator = {
ClassicRefreshFooter(it)
}
) {
LazyColumn(
modifier = Modifier.fillMaxSize().background(color = Color.White),
state = lazyListState,
) {
repeat(itemCount) {
item {
Text(
text = "UltraSwipeRefresh列表Item${it + 1}",
modifier = Modifier.padding(horizontal = 16.dp, vertical = 10.dp),
color = Color(0xFF333333),
fontSize = 16.sp
)
Divider(
modifier = Modifier.padding(horizontal = 16.dp),
color = Color(0xFFF2F3F6)
)
}
}
}
}
}
