Как использовать SwipeRefresh с Jetpack Compose LazyColumn и reverseLayout

Question

Я пытаюсь создать функцию чата в приложении. Мы хотели бы, чтобы макет был обратным в столбце для облегчения прокрутки. Однако мы не можем заставить SwipeRefresh работать в этой конфигурации, если список достаточно велик для прокрутки. Предпочтительно, мы хотели бы иметь возможность провести снизу вверх для обновления, но даже при попытке использовать обычный SwipeRefresh сверху он не работает, если мы не удалим «reverseLayout = true». Кто-нибудь смог использовать обратную раскладку с SwipeRefresh или PullRefresh?

      @Composable
fun CRFilesPage(
    uiState: StateFlow<ViewModel.UiState>,
    refreshList: () -> Unit
) {

    val state = uiState.collectAsState()
    val lazyListState: LazyListState = rememberLazyListState()
    val swipeRefreshState = rememberSwipeRefreshState(isRefreshing = state.value.isSending)

    SwipeRefresh(
        state = swipeRefreshState,
        onRefresh = { refreshList.invoke() },
        modifier = Modifier

    ) {

        LazyColumn(
            state = lazyListState,
            reverseLayout = true
        ) {

            items(items = state.value.comments, key = { it.id }) {
                Text(text = it.comment)
            }
        }
    }
}

Answer 1

Так что я пока не вижу такой возможности в составлении материала. Я вижу некоторые комментарии в коде, позволяющиеPullRefreshStatesно их еще нет. Поэтому я взял текущий код из Compose Material.1.4.0-rc01и изменил его для поддержки варианта.

Я понял, что поместил сюда много кода, поэтому переместил весь его по адресу: https://gist.github.com/Del-S/f0d4ee78eba893ecde7b15393dfff4c1.

Это содержитReversiblePullRefreshсо всеми необходимыми функциями. Он поддерживает состояние макета по умолчанию и обратное состояние макета. И он также содержит индикатор обновления, который должен работать правильно.

---

ИСПОЛЬЗОВАНИЕ: Это почти то же самое, что и при использовании PullRefresh по умолчанию, с добавлениемreverseLayoutсвойство.

      @OptIn(ExperimentalMaterialApi::class)
@Composable
private fun ReversedList(
    messages: List<String>,
    modifier: Modifier = Modifier
) {
    val reverseLayout = true
    val refreshScope = rememberCoroutineScope()
    var refreshing by remember { mutableStateOf(false) }

    fun triggerPagingRefresh() = refreshScope.launch {
        refreshing = true
        // Here should be your refresh logic (or it can be passed as lambda into Composable function).
        delay(2_000L)
        refreshing = false
    }

    val state = rememberReversiblePullRefreshState(
        refreshing = refreshing,
        onRefresh = ::triggerPagingRefresh,
        reverseLayout = reverseLayout
    )

    Box(modifier.reversiblePullRefresh(state = state, reverseLayout = reverseLayout)) {
        LazyColumn(reverseLayout = reverseLayout) {
            items(messages) { item ->
                Text(text = item)
            }
        }

        ReversiblePullRefreshIndicator(
            refreshing = refreshing,
            state = state,
            modifier = Modifier.align(Alignment.BottomCenter.takeIf { reverseLayout } ?: Alignment.TopCenter),
            reverseLayout = reverseLayout
        )
    }
}

---

Да, и это все. Кажется, что много, но это всего лишь небольшая модификация уже существующего кода. В моем коде это работает так: