Material3 PullToRefreshContainer下拉刷新功能失效求助

使用Compose BOM版本2024.04.01的Material3组件，在ProductsListScreen中实现PullToRefreshContainer时，能看到顶部的刷新指示器，但无法触发下拉刷新动作。尝试结合pullToRefreshState与LazyGrid、Box，以及从主页面调用子页面方法触发均未解决。

问题代码 #

fun ProductsListScreen() {
    val lazyListState: LazyGridState = rememberLazyGridState()
    var isRefreshing by remember {
        mutableStateOf(false)
    }
    val pullToRefreshState = rememberPullToRefreshState(enabled = { isRefreshing })
    val scope = rememberCoroutineScope()

    Scaffold(modifier = Modifier.fillMaxSize(), topBar = {
        ///topAppBar
    }) { paddingValues ->
        Box(
            Modifier
                .verticalScroll(rememberScrollState())
                .nestedScroll(pullToRefreshState.nestedScrollConnection)
                .fillMaxSize()
                .padding(paddingValues)
        ) {
            LazyVerticalGrid(
                state = lazyListState,
                modifier = Modifier
                    .fillMaxSize()
                    .padding(10.dp)
                    .padding(bottom = paddingValues.calculateBottomPadding()),
                columns = GridCells.Fixed(2),
                contentPadding = PaddingValues(5.dp)
            ) {
               /// Items 
            }

            if (pullToRefreshState.isRefreshing) {
                LaunchedEffect(true) {
                    scope.launch {
                        isRefreshing = true
                        productViewModel.loadProducts(forceRefresh = true)
                        isRefreshing = false
                    }
                }
            }
            LaunchedEffect(isRefreshing) {
                if (isRefreshing) {
                    pullToRefreshState.startRefresh()
                } else {
                    pullToRefreshState.endRefresh()
                }
            }

            PullToRefreshContainer(
                state = pullToRefreshState,
                modifier = Modifier
                    .align(Alignment.TopCenter),
            )
        }
    }
}

依赖配置：

androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-material3 = { group = "androidx.compose.material3", name = "material3" }

问题原因 #

1. 滚动容器冲突：外层Box添加了verticalScroll修饰符，与内部LazyVerticalGrid的滚动逻辑冲突，导致下拉手势被外层容器拦截，无法传递给pullToRefreshState。
2. enabled参数逻辑错误：rememberPullToRefreshState的enabled参数传入{ isRefreshing }，意味着只有正在刷新时才允许触发下拉，这与实际需求相反——应该是未刷新时允许触发。
3. 状态控制逻辑颠倒：用isRefreshing驱动pullToRefreshState的startRefresh/endRefresh，正确的逻辑应该是监听pullToRefreshState.isRefreshing来触发数据刷新，并更新isRefreshing状态。

修复后的代码 #

fun ProductsListScreen() {
    val lazyListState: LazyGridState = rememberLazyGridState()
    var isRefreshing by remember { mutableStateOf(false) }
    // 修正enabled参数：未刷新时允许触发下拉
    val pullToRefreshState = rememberPullToRefreshState(enabled = { !isRefreshing })
    val scope = rememberCoroutineScope()

    Scaffold(modifier = Modifier.fillMaxSize(), topBar = {
        ///topAppBar
    }) { paddingValues ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
        ) {
            LazyVerticalGrid(
                state = lazyListState,
                modifier = Modifier
                    .fillMaxSize()
                    .padding(10.dp)
                    .padding(bottom = paddingValues.calculateBottomPadding())
                    // 将nestedScroll绑定到LazyGrid，而不是外层Box
                    .nestedScroll(pullToRefreshState.nestedScrollConnection),
                columns = GridCells.Fixed(2),
                contentPadding = PaddingValues(5.dp)
            ) {
               /// Items 
            }

            // 监听pullToRefreshState的刷新状态，触发数据加载
            LaunchedEffect(pullToRefreshState.isRefreshing) {
                if (pullToRefreshState.isRefreshing && !isRefreshing) {
                    isRefreshing = true
                    try {
                        productViewModel.loadProducts(forceRefresh = true)
                    } finally {
                        // 无论成功失败，结束刷新状态
                        isRefreshing = false
                        pullToRefreshState.endRefresh()
                    }
                }
            }

            PullToRefreshContainer(
                state = pullToRefreshState,
                modifier = Modifier.align(Alignment.TopCenter),
            )
        }
    }
}

关键修复点 #

• 移除外层Box的verticalScroll修饰符，避免与LazyVerticalGrid的滚动冲突。
• 将nestedScroll(pullToRefreshState.nestedScrollConnection)移到LazyVerticalGrid的修饰符中，确保下拉手势被正确捕获。
• 修正rememberPullToRefreshState的enabled参数为{ !isRefreshing }，允许未刷新时触发下拉。
• 调整状态监听逻辑：通过LaunchedEffect(pullToRefreshState.isRefreshing)触发数据加载，完成后调用pullToRefreshState.endRefresh()结束刷新状态。

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