Compose for DesktopのDesktop_Componentsのチュートリアルをやってみた。

環境

• Compose for Desktop 1.0.0-alpha3

参考

• compose-jb/tutorials/Desktop_Components at master · JetBrains/compose-jb · GitHub

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)
            )
        }
    }
}