Spec-Zone.ru › Kotlin 2

Полосы прокрутки

Полосы прокрутки можно добавлять к прокручиваемым компонентам. Полоса прокрутки и прокручиваемый компонент используют общее состояние, чтобы синхронизировать их работу.

Примеры в этом руководстве — это запускаемые настольные приложения. Чтобы попробовать один из них:

  1. Создайте проект Compose Multiplatform с помощью плагина Kotlin Multiplatform для IDE или онлайн-мастера.

  2. Откройте файл точки входа настольного приложения. Например, desktopApp/src/main/kotlin/com/example/my_desktop_app/main.kt.

  3. Замените его содержимое приведённым примером.

Модификаторы прокрутки

Модификаторы verticalScroll и horizontalScroll позволяют пользователю прокручивать элемент, если границы его содержимого превышают максимальные ограничения размера. К прокручиваемому компоненту можно добавить компонент VerticalScrollbar с помощью модификатора verticalScroll, а компонент HorizontalScrollbar — с помощью модификатора horizontalScroll:

import androidx.compose.foundation.HorizontalScrollbar import androidx.compose.foundation.VerticalScrollbar import androidx.compose.foundation.background import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollbarAdapter import androidx.compose.foundation.verticalScroll import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import androidx.compose.ui.window.WindowState import androidx.compose.ui.window.singleWindowApplication fun main() = singleWindowApplication( title = "Scrollbars", state = WindowState(width = 300.dp, height = 310.dp) ) { Box( modifier = Modifier.fillMaxSize() .background(color = Color(180, 180, 180)) .padding(10.dp) ) { val stateVertical = rememberScrollState(0) val stateHorizontal = rememberScrollState(0) Box( modifier = Modifier .fillMaxSize() .verticalScroll(stateVertical) .padding(end = 12.dp, bottom = 12.dp) .horizontalScroll(stateHorizontal) ) { Column { for (item in 0..30) { TextBox("Item #$item") if (item < 30) { Spacer(modifier = Modifier.height(5.dp)) } } } } VerticalScrollbar( modifier = Modifier.align(Alignment.CenterEnd) .fillMaxHeight(), adapter = rememberScrollbarAdapter(stateVertical) ) HorizontalScrollbar( modifier = Modifier.align(Alignment.BottomStart) .fillMaxWidth() .padding(end = 12.dp), adapter = rememberScrollbarAdapter(stateHorizontal) ) } } @Composable fun TextBox(text: String = "Item") { Box( modifier = Modifier.height(32.dp) .width(400.dp) .background(color = Color(0, 0, 0, 20)) .padding(start = 10.dp), contentAlignment = Alignment.CenterStart ) { Text(text = text) } }

Перемещать полосы прокрутки можно перетаскиванием, с помощью колёсика мыши или тачпада. Чтобы прокручивать по горизонтали с помощью мыши, нажмите на колёсико сбоку или удерживайте клавишу Shift.

Scrollbar

Лениво загружаемые прокручиваемые компоненты

Полосы прокрутки можно использовать и с лениво загружаемыми прокручиваемыми компонентами, например LazyColumn и LazyRow. Лениво загружаемые компоненты гораздо эффективнее при работе с длинными списками, поскольку создают элементы только по мере необходимости.

import androidx.compose.foundation.VerticalScrollbar import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.rememberScrollbarAdapter import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Window import androidx.compose.ui.window.application import androidx.compose.ui.window.rememberWindowState fun main() = application { Window( onCloseRequest = ::exitApplication, title = "Scrollbars", state = rememberWindowState(width = 300.dp, height = 310.dp) ) { LazyScrollable() } } @Composable fun LazyScrollable() { Box( modifier = Modifier.fillMaxSize() .background(color = Color(180, 180, 180)) .padding(10.dp) ) { val state = rememberLazyListState() LazyColumn(Modifier.fillMaxSize().padding(end = 12.dp), state) { items(1000) { x -> TextBox("Item #$x") Spacer(modifier = Modifier.height(5.dp)) } } VerticalScrollbar( modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(), adapter = rememberScrollbarAdapter( scrollState = state ) ) } } @Composable fun TextBox(text: String = "Item") { Box( modifier = Modifier.height(32.dp) .fillMaxWidth() .background(color = Color(0, 0, 0, 20)) .padding(start = 10.dp), contentAlignment = Alignment.CenterStart ) { Text(text = text) } }
Lazy scrollbar

Известные ограничения

В настоящее время прокрутка с помощью сенсорных экранов, тачпадов и трекпадов обрабатывается как события мыши, что может приводить к сбоям и ограничениям, например к отсутствию масштабирования жестом сведения пальцев. Мы постоянно совершенствуем обработку ввода и жестов и планируем добавить встроенную поддержку этих устройств ввода:

  • Добавить встроенную поддержку сенсорных экранов (CMP-1609)

  • Добавить встроенную поддержку тачпадов и трекпадов (CMP-1610)

Что дальше?

Изучите руководства по другим компонентам для настольных приложений.

4 августа 2026 г.
Управление окнами верхнего уровняВсплывающие подсказки

© 2010–2026 JetBrains s.r.o. and Kotlin Programming Language contributors
Licensed under the Apache License, Version 2.0.
https://kotlinlang.org/docs/multiplatform/compose-desktop-scrollbars.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API