Material 3 Expressive実装例 : ScrollField

Material 3 Expressive の実装例の紹介シリーズです。
今回は新たに追加されたコンポーネントである ScrollField を紹介します。
(androidx.compose.material3:material3:1.5.0-alpha22 時点での内容になります。)

ScrollField とは

Material Design のガイドラインにはまだページがないのですが、View 時代にあった NumberPicker のようなものの Jetpack Compose 版となります。
主に時間の選択で使うことが多いと思われます。

実装

ScrollField

ScrollField と rememberScrollFieldState を使用してアイテム数や最初の index を設定します。

val minVal = 1000
val maxVal = 2000
val itemCount = (maxVal - minVal) + 1

val state = rememberScrollFieldState(
    itemCount = itemCount, 
    index = 0
)

Box(
    modifier = Modifier
        .background(
            MaterialTheme.colorScheme.surfaceContainerHighest,
            RoundedCornerShape(28.dp),
        )
        .padding(12.dp),
) {
    ScrollField(
        state = state,
        modifier = Modifier.size(width = 192.dp, height = 160.dp),
        field = { index, isSelected ->
            val valueToShow = minVal + index
            Box(modifier = Modifier.fillMaxHeight(), contentAlignment = Alignment.Center) {
                Text(
                    text = valueToShow.toString(),
                    style =
                        if (isSelected) {
                            MaterialTheme.typography.displayLargeEmphasized
                        } else {
                            MaterialTheme.typography.displayMedium
                        },
                    color =
                        if (isSelected) {
                            MaterialTheme.colorScheme.onSurface
                        } else {
                            MaterialTheme.colorScheme.outline
                        },
                )
            }
        },
    )
}

余談ですが、ScrollField の内部では Pager が使用されています。