Compose For DesktopでColumnをスクロール可能にするには

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください