Функция PullToRefreshBox

Функция PullToRefreshBox из Material3 оборачивает прокручиваемое содержимое и реагирует на жест «потянуть вниз». Пока идёт загрузка, параметр isRefreshing должен быть true, иначе индикатор скроется. Когда пользователь дотянул до порога, вызывают лямбду onRefresh, где обычно запускают загрузку данных. Внутри кладут, например, LazyColumn.

Синтаксис

PullToRefreshBox(
	isRefreshing = isRefreshing,
	onRefresh = { isRefreshing = true },
) {
	LazyColumn { /* content */ }
}

Параметры

Параметр	Описание
`isRefreshing`	`true`, пока идёт обновление и виден индикатор.
`onRefresh`	Лямбда без параметров. Её вызывают, когда пользователь завершил жест обновления.
`content`	Прокручиваемое содержимое под индикатором.

Пример

Давайте обновим список по жесту pull-to-refresh:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.pulltorefresh.PullToRefreshBox
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var isRefreshing by remember { mutableStateOf(false) }
			var lines by remember { mutableStateOf(listOf("abcde")) }
			PullToRefreshBox(
				isRefreshing = isRefreshing,
				onRefresh = {
					isRefreshing = true
					lines = listOf("abcde", "12345")
					isRefreshing = false
				},
			) {
				LazyColumn {
					items(lines) { line ->
						Text(text = line)
					}
				}
			}
		}
	}
}

На экране сначала одна строка "abcde", после жеста обновления в списке появится и "12345".

Пример

Давайте сбросим флаг обновления из корутины после задержки:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.pulltorefresh.PullToRefreshBox
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import kotlinx.coroutines.delay

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var isRefreshing by remember { mutableStateOf(false) }
			if (isRefreshing) {
				LaunchedEffect(Unit) {
					delay(1000)
					isRefreshing = false
				}
			}
			PullToRefreshBox(
				isRefreshing = isRefreshing,
				onRefresh = { isRefreshing = true },
			) {
				LazyColumn {
					item { Text(text = "abcde") }
					item { Text(text = "12345") }
				}
			}
		}
	}
}

На экране индикатор обновления исчезнет через секунду после жеста, список останется на месте.

Смотрите также

функция LazyColumn,
которую часто кладут внутрь PullToRefreshBox
метод verticalScroll,
который прокручивает Column без ленивого списка
функция CircularProgressIndicator,
которую иногда показывают при загрузке
функция LazyRow,
которую тоже можно обернуть для обновления