Material3如何实现上拉加载？修改pullToRefresh方向为BottomTop

Material3 官方的pullToRefresh确实只支持下拉触发刷新，没有内置的反向配置。要实现上拉底部触发加载更多，可以通过以下几种方案实现：

方案一：自定义手势检测+滚动状态判断（推荐） #

利用Compose的手势API结合列表滚动状态，手动实现上拉触发逻辑，完全可控且无需依赖第三方库。

核心思路 #

1. 通过rememberLazyListState获取列表的滚动状态，判断是否已经滚动到底部；
2. 使用pointerInput监听拖动手势，检测用户从列表底部向上拖动的动作；
3. 当满足「已滚动到底部 + 向上拖动距离超过阈值」的条件时，触发加载更多逻辑。

代码示例 #

@Composable
fun PullUpLoadMoreDemo() {
    val listState = rememberLazyListState()
    val isLoading = remember { mutableStateOf(false) }
    val data = remember { mutableStateListOf<String>().apply { repeat(20) { add("Item $it") } } }

    // 加载更多逻辑
    val loadMore: () -> Unit = {
        if (!isLoading.value) {
            isLoading.value = true
            // 模拟异步加载
            LaunchedEffect(Unit) {
                delay(1500)
                repeat(10) { data.add("New Item ${data.size}") }
                isLoading.value = false
            }
        }
    }

    Column(modifier = Modifier.fillMaxSize()) {
        LazyColumn(
            state = listState,
            modifier = Modifier
                .fillMaxSize()
                .pointerInput(Unit) {
                    detectDragGestures { _, dragAmount ->
                        // 向上拖动时，dragAmount的y值为负
                        val isAtBottom = listState.run {
                            layoutInfo.visibleItemsInfo.lastOrNull()?.index == layoutInfo.totalItemsCount - 1
                        }
                        // 拖动距离阈值（可根据需求调整）
                        val dragThreshold = 80.dp.toPx()
                        
                        if (isAtBottom && !isLoading.value && dragAmount.y < -dragThreshold) {
                            loadMore()
                        }
                    }
                }
        ) {
            items(data) { item ->
                Text(text = item, modifier = Modifier.padding(16.dp))
            }
            // 加载状态占位项
            item {
                if (isLoading.value) {
                    Row(
                        modifier = Modifier.fillMaxWidth().padding(16.dp),
                        horizontalArrangement = Arrangement.Center
                    ) {
                        CircularProgressIndicator()
                    }
                }
            }
        }
    }
}

注意事项 #

• 可以调整dragThreshold的值来控制触发加载的灵敏度；
• 要避免重复触发加载，需通过isLoading状态做判断；
• 如果列表有嵌套滚动（比如嵌套在Scaffold的content里），可以结合nestedScroll API优化手势冲突。

方案二：使用第三方扩展库 #

一些社区维护的Compose库提供了开箱即用的上拉加载组件，这类库通常已经处理了手势冲突、状态管理等细节。不过如果不想引入第三方依赖，方案一的自定义实现足够轻量。

方案三：反向布局（hack式，不推荐） #

把整个列表倒过来，让下拉操作变成「视觉上的上拉」：

1. 将列表的布局反转（Modifier.scale(scaleX = 1f, scaleY = -1f)）；
2. 将每个列表项也反转回来，保证内容显示正常；
3. 此时使用默认的pullToRefresh，下拉就会触发原本的加载逻辑，视觉上相当于上拉底部加载。

这种方式虽然能快速实现，但会带来布局层级的复杂度，以及滚动状态判断的混淆，仅适合临时场景。

内容的提问来源于stack exchange，提问作者kristyna