【Jetpack Compose】でTimePickerとTextFieldを使う

を作ります。

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    Text(
        text = "時刻",
        modifier = Modifier.weight(1f)
    )

    // 👇 ここが最重要ポイント！
    Box(
        modifier = Modifier
            .weight(3f)
            .clickable { showTimePicker = true } // ① Box全体をタップ可能にする
    ) {
        TextField(
            value = selectedTimeText,
            onValueChange = {},
            label = { Text("時刻を選択") },
            enabled = false, // ② TextField自体のイベントを無効化
            colors = androidx.compose.material3.TextFieldDefaults.colors(
                disabledTextColor = androidx.compose.material3.MaterialTheme.colorScheme.onSurface,
                disabledLabelColor = androidx.compose.material3.MaterialTheme.colorScheme.onSurfaceVariant,
                disabledContainerColor = androidx.compose.material3.MaterialTheme.colorScheme.surfaceVariant
            ),
            modifier = Modifier.fillMaxWidth()
        )
    }
}

3つの重要なテクニック
普通の TextField は「タップするとキーボードが立ち上がる」のが標準の挙動です。それを「タップしたらダイアログが出る」に変えるために、コード内で 3つの工夫 をしています。

① Box で包んで clickable をつける
TextField の外側を Box（コンテナ）で囲み、そこに .clickable { showTimePicker = true } を指定しています。
これにより、ユーザーがテキストフィールドのエリアをタップしたときに、タイムピッカーを開くフラグ（showTimePicker）を true に切り替えることができます。

② enabled = false でTextFieldの挙動を「殺す」
ここが一番のトリックです。
TextField 自体にタップイベントが残っていると、外側の Box のタップ処理と衝突してしまい、うまくダイアログが開かないことがあります。

そこで、あえて enabled = false（無効化） に設定します。こうすることで、TextFieldは「ただの見た目（置物）」になり、ユーザーのタップが背後の Box に100%伝わるようになります（キーボードも絶対に立ち上がりません）。

③ colors でグレーアウト（無効化の見た目）を直す
enabled = false にすると、Androidの標準仕様で文字や背景が薄いグレーに変わり、「今は触れません」という見た目になってしまいます。

今回は「触れる場所（タップできる）」として見せたいので、colors 属性を使って無効化時の色（disabled...）を、通常時の色と同じになるように上書きしています。

disabledTextColor: 文字の色を通常時の色に固定

disabledLabelColor: ラベル（「時刻を選択」）の色を固定

disabledContainerColor: 入力欄の背景色を固定

まとめ
enabled = false でテキストフィールドを「入力できないただの箱」にする。

colors でグレーアウトを防ぎ、通常通りに見せる。

外側の Box に .clickable をつけて、タップされたらダイアログを出す。