verticalScroll修飾子とhorizontalScrollを修飾子を適用すると、マウスホイールでColumnがスクロールできるようになります。
fun main() = application {
Window(
onCloseRequest = ::exitApplication,
state = WindowState(width = 250.dp, height = 200.dp),
title = "ScrollBarSample"
) {
val stateVertical = rememberScrollState(0)
val stateHorizontal = rememberScrollState(0)
Column(
modifier = Modifier.fillMaxSize()
.verticalScroll(stateVertical)
.horizontalScroll(stateHorizontal)
) {
for (item in 0..30) {
Box(modifier = Modifier.width(400.dp)) {
Text(text = "Item #$item")
}
}
}
}
}
次に、スクロールバーを表示する方法です。
スクロールバーを表示するには、VerticalScrollbar()とVerticalScrollbar()を使用します。
rememberScrollState()関数で作成したScrollStateを共有して、Boxとスクロールバーのスクロールの位置を同期します。
スクロールの領域を調整するためと、スクロールバーの配置のためにBoxを追加しました。
fun main() = application {
Window(
onCloseRequest = ::exitApplication,
state = WindowState(width = 250.dp, height = 200.dp),
title = "ScrollBarSample"
) {
Box(
modifier = Modifier.fillMaxSize()
) {
val stateVertical = rememberScrollState(0)
val stateHorizontal = rememberScrollState(0)
Box(
modifier = Modifier
.fillMaxSize()
.padding(end = 12.dp, bottom = 12.dp)
.verticalScroll(stateVertical)
.horizontalScroll(stateHorizontal)
) {
Column {
for (item in 0..30) {
Box(modifier = Modifier.width(400.dp)) {
Text(text = "Item #$item")
}
}
}
}
VerticalScrollbar(
modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(),
adapter = rememberScrollbarAdapter(stateVertical)
)
HorizontalScrollbar(
modifier = Modifier.align(Alignment.BottomStart).fillMaxWidth().padding(end = 12.dp),
adapter = rememberScrollbarAdapter(stateHorizontal)
)
}
}
}
LazyColumnを使う場合は、rememberScrollStateの代わりにrememberLazyListStateを使用します。
fun main() = application {
Window(
onCloseRequest = ::exitApplication,
state = WindowState(width = 250.dp, height = 200.dp),
title = "ScrollBarSample"
) {
Box(
modifier = Modifier.fillMaxSize()
) {
val stateVertical = rememberLazyListState()
val stateHorizontal = rememberScrollState(0)
Box(
modifier = Modifier
.fillMaxSize()
.padding(end = 12.dp, bottom = 12.dp)
.horizontalScroll(stateHorizontal)
) {
LazyColumn(modifier = Modifier.fillMaxSize(), stateVertical) {
items(1000) { item ->
Box(modifier = Modifier.width(400.dp)) {
Text(text = "Item #$item")
}
}
}
}
VerticalScrollbar(
modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(),
adapter = rememberScrollbarAdapter(stateVertical)
)
HorizontalScrollbar(
modifier = Modifier.align(Alignment.BottomStart)
.fillMaxWidth()
.padding(end = 12.dp),
adapter = rememberScrollbarAdapter(stateHorizontal)
)
}
}
}