Compose for DesktopのDesktop_Componentsのチュートリアルをやってみた。
環境
- Compose for Desktop 1.0.0-alpha3
参考
Scrollbars
スクロールバーはスクロール可能なコンポーネントに適用できる
スクロールバーとスクロール可能なコンポーネントは、相互に同期するため状態を共有する。
BoxのサイズよりもBoxのコンテンツが大きい時、マウスホイールやタッチパッドによってスクロールできるが、スクロールバーは表示されない。
fun main() = singleWindowApplication(
state = WindowState(width = 250.dp, height = 400.dp)
) {
Box(modifier = Modifier.fillMaxSize()) {
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) {
Box(modifier = Modifier.width(400.dp)) {
Text(text = "Item #$item")
}
}
}
}
}
}
VerticalScrollbarやHorizontalScrollbarを配置することでスクロールバーが表示される。
rememberScrollState()関数で作成したScrollStateを共有することで、Boxとスクロールバーのスクロールの位置が同期される。
fun main() = singleWindowApplication(
state = WindowState(width = 250.dp, height = 400.dp)
) {
Box(modifier = Modifier.fillMaxSize()) {
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) {
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)
)
}
}
垂直方向のスクロール位置と水平方向のスクロールバーを同期すると、スクロールバーを左右に動かすと上下にスクロールする。
fun main() = singleWindowApplication(
state = WindowState(width = 250.dp, height = 400.dp)
) {
Box(modifier = Modifier.fillMaxSize()) {
val stateVertical = rememberScrollState(0)
Box(
modifier = Modifier
.fillMaxSize()
.verticalScroll(stateVertical)
.padding(end = 12.dp, bottom = 12.dp)
) {
Column {
for (item in 0..30) {
Box(modifier = Modifier.width(400.dp)) {
Text(text = "Item #$item")
}
}
}
}
HorizontalScrollbar(
modifier = Modifier.align(Alignment.BottomStart)
.fillMaxWidth()
.padding(end = 12.dp),
adapter = rememberScrollbarAdapter(stateVertical)
)
}
}
Lazy scrollable components
LazyColumnなどのLazy scrollable componentsにスクロールバーを使用できる。
スクロール位置の同期にはScrollStateでなく、rememberLazyListState()を使用して取得したLazyListStateを使用する。
fun main() = singleWindowApplication(
state = WindowState(width = 250.dp, height = 400.dp)
) {
Box(modifier = Modifier.fillMaxSize()) {
val state = rememberLazyListState()
LazyColumn(modifier = Modifier.fillMaxSize(), state) {
items(1000) { x ->
Text("Item #$x")
}
}
VerticalScrollbar(
modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(),
adapter = rememberScrollbarAdapter(state)
)
}
}
テーマ
スクロールバーは、外観を変更するためのテーマをサポートしている。
fun main() = singleWindowApplication(
state = WindowState(width = 250.dp, height = 400.dp)
) {
DesktopMaterialTheme {
Box(modifier = Modifier.fillMaxSize()) {
val stateVertical = rememberScrollState(0)
Box(
modifier = Modifier
.fillMaxSize()
.verticalScroll(stateVertical)
.padding(end = 12.dp, bottom = 12.dp)
) {
Column {
for (item in 0..30) {
Text(text = "Item #$item")
}
}
}
VerticalScrollbar(
modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(),
adapter = rememberScrollbarAdapter(stateVertical)
)
}
}
}