JetpackComposeで時分秒の３連ピッカー

はじめに

実用性の高そうな

• 時（0–23）
• 分（0–59）
• 秒（0–59）
  の三つのピッカーをJetpackComposeで作ります。
  チートシート的な記事にしたいのでサクッと書いていきます。

実践

親Composable（TimePicker全体）

@Composable
fun TimePicker(
    modifier: Modifier = Modifier,
    onTimeSelected: (hour: String, minute: String, second: String) -> Unit
) {
    var hour by remember { mutableStateOf("00") }
    var minute by remember { mutableStateOf("00") }
    var second by remember { mutableStateOf("00") }

    LaunchedEffect(hour, minute, second) {
        onTimeSelected(hour, minute, second)
    }

    Row(
        modifier = modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        TimeColumn(
            label = "時",
            items = (0..23).map { it.toString().padStart(2, '0') },
            onSelected = { hour = it }
        )

        TimeColumn(
            label = "分",
            items = (0..59).map { it.toString().padStart(2, '0') },
            onSelected = { minute = it }
        )

        TimeColumn(
            label = "秒",
            items = (0..59).map { it.toString().padStart(2, '0') },
            onSelected = { second = it }
        )
    }
}

各列（ラベル）

@Composable
fun TimeColumn(
    label: String,
    items: List<String>,
    onSelected: (String) -> Unit
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = label,
            fontSize = 14.sp,
            color = Color.Gray
        )

        InfiniteScrollPicker(
            items = items,
            modifier = Modifier.width(80.dp),
            onSelected = onSelected
        )
    }
}

使用例

@Composable
fun ExampleScreen() {
    var time by remember { mutableStateOf("00:00:00") }

    TimePicker(
        onTimeSelected = { h, m, s ->
            time = "$h:$m:$s"
        }
    )

    Spacer(Modifier.height(16.dp))

    Text(
        text = "選択中の時刻: $time",
        fontSize = 20.sp,
        fontWeight = FontWeight.Bold
    )
}