Функция VerticalPager

Функция VerticalPager из пакета androidx.compose.foundation.pager рисует одну страницу на весь контейнер и переключает их свайпом вверх и вниз. Состояние хранит параметр state типа PagerState, который создают через rememberPagerState с лямбдой pageCount. Содержимое каждой страницы задают в лямбде pageContent по номеру страницы.

Синтаксис

val pagerState = rememberPagerState(pageCount = { 2 })
VerticalPager(state = pagerState) { page ->
	Text("page $page")
}

Параметры

Параметр	Описание
`state`	Состояние pager. Класс `PagerState` из rememberPagerState.
`pageContent`	Лямбда с содержимым страницы. Номер страницы передают параметром `page`.
`pageSpacing`	Зазор между соседними страницами в dp.
`userScrollEnabled`	Если `false`, свайп между страницами отключён.
`reverseLayout`	Если `true`, направление листания меняется на противоположное.

Пример

Давайте покажем две страницы с разным текстом:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.pager.VerticalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Text

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val pagerState = rememberPagerState(pageCount = { 2 })
			VerticalPager(state = pagerState) { page ->
				val text = if (page == 0) "abcde" else "12345"
				Text(text = text)
			}
		}
	}
}

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

Пример

Давайте откроем вторую страницу программно в корутине:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.pager.VerticalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.rememberCoroutineScope
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val pagerState = rememberPagerState(pageCount = { 2 })
			val scope = rememberCoroutineScope()
			VerticalPager(state = pagerState) { page ->
				val text = if (page == 0) "abcde" else "12345"
				Button(
					onClick = {
						scope.launch {
							pagerState.animateScrollToPage(1)
						}
					},
				) {
					Text(text = text)
				}
			}
		}
	}
}

На экране кнопка с текстом текущей страницы, после нажатия pager анимированно перейдёт ко второй странице.

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

функция HorizontalPager,
которая листает страницы по горизонтали
метод animateScrollToPage,
который плавно переключает страницу
функция rememberPagerState,
которая задаёт pageCount
функция LazyColumn,
которая прокручивает список без постраничного режима