時間挑選器通常會顯示在對話方塊中。您可以使用相對通用的 最簡單的對話方塊實作，或您可以使用 更有彈性
如要進一步瞭解對話方塊的一般資訊，包括時間挑選器的使用方式 狀態，請參閱時間挑選器指南。
基本範例
如要建立時間挑選器的對話方塊，最簡單的方式就是：
建立實作 AlertDialog 的可組合函式。下列程式碼片段
以下為使用這個方法，提供了相對最少對話的範例：
@Composable
fun DialWithDialogExample(
onConfirm: (TimePickerState) -> Unit,
onDismiss: () -> Unit,
) {
val currentTime = Calendar.getInstance()
val timePickerState = rememberTimePickerState(
initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
initialMinute = currentTime.get(Calendar.MINUTE),
is24Hour = true,
)
TimePickerDialog(
onDismiss = { onDismiss() },
onConfirm = { onConfirm(timePickerState) }
) {
TimePicker(
state = timePickerState,
)
}
}
@Composable
fun TimePickerDialog(
onDismiss: () -> Unit,
onConfirm: () -> Unit,
content: @Composable () -> Unit
) {
AlertDialog(
onDismissRequest = onDismiss,
dismissButton = {
TextButton(onClick = { onDismiss() }) {
Text("Dismiss")
}
},
confirmButton = {
TextButton(onClick = { onConfirm() }) {
Text("OK")
}
},
text = { content() }
)
}
請注意這個程式碼片段的重點：
DialWithDialogExample可組合函式會將TimePicker納入對話方塊中。TimePickerDialog是建立自訂可組合函式，可建立AlertDialog分別是onDismiss：使用者關閉對話方塊時呼叫的函式 (透過 關閉按鈕或返回導覽)。onConfirm：使用者點選「OK」時呼叫的函式按鈕。content：在對話方塊中顯示時間挑選器的可組合函式。
AlertDialog包括：- 標示為「關閉」的關閉按鈕。
- 標示為「確定」的確認按鈕。
- 以
text參數傳遞的時間挑選器內容。
DialWithDialogExample會使用TimePickerState並傳遞至TimePicker和onConfirm函式。
進階範例
這段程式碼片段示範進階導入「可自訂的時間」 Jetpack Compose 中的挑選器對話方塊。
@Composable
fun AdvancedTimePickerExample(
onConfirm: (TimePickerState) -> Unit,
onDismiss: () -> Unit,
) {
val currentTime = Calendar.getInstance()
val timePickerState = rememberTimePickerState(
initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
initialMinute = currentTime.get(Calendar.MINUTE),
is24Hour = true,
)
/** Determines whether the time picker is dial or input */
var showDial by remember { mutableStateOf(true) }
/** The icon used for the icon button that switches from dial to input */
val toggleIcon = if (showDial) {
Icons.Filled.EditCalendar
} else {
Icons.Filled.AccessTime
}
AdvancedTimePickerDialog(
onDismiss = { onDismiss() },
onConfirm = { onConfirm(timePickerState) },
toggle = {
IconButton(onClick = { showDial = !showDial }) {
Icon(
imageVector = toggleIcon,
contentDescription = "Time picker type toggle",
)
}
},
) {
if (showDial) {
TimePicker(
state = timePickerState,
)
} else {
TimeInput(
state = timePickerState,
)
}
}
}
@Composable
fun AdvancedTimePickerDialog(
title: String = "Select Time",
onDismiss: () -> Unit,
onConfirm: () -> Unit,
toggle: @Composable () -> Unit = {},
content: @Composable () -> Unit,
) {
Dialog(
onDismissRequest = onDismiss,
properties = DialogProperties(usePlatformDefaultWidth = false),
) {
Surface(
shape = MaterialTheme.shapes.extraLarge,
tonalElevation = 6.dp,
modifier =
Modifier
.width(IntrinsicSize.Min)
.height(IntrinsicSize.Min)
.background(
shape = MaterialTheme.shapes.extraLarge,
color = MaterialTheme.colorScheme.surface
),
) {
Column(
modifier = Modifier.padding(24.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 20.dp),
text = title,
style = MaterialTheme.typography.labelMedium
)
content()
Row(
modifier = Modifier
.height(40.dp)
.fillMaxWidth()
) {
toggle()
Spacer(modifier = Modifier.weight(1f))
TextButton(onClick = onDismiss) { Text("Cancel") }
TextButton(onClick = onConfirm) { Text("OK") }
}
}
}
}
}
請注意這個程式碼片段的重點：
AdvancedTimePickerExample可組合函式會建立自訂時間 挑選器對話方塊。- 使用
Dialog可組合函式提供的彈性比AlertDialog更具彈性。 - 對話方塊中包含可自訂的標題，以及用來切換設定的切換鈕 切換輸入模式
Surface會將形狀和高度套用至對話方塊， 將寬度和高度都設為IntrinsicSize.Min。Column和Row版面配置提供對話方塊的結構元件。- 這個範例會使用
showDial追蹤挑選器模式。IconButton會在不同模式之間切換，並據此更新圖示。- 對話方塊內容會根據以下項目在
TimePicker和TimeInput之間切換showDial狀態。
這種進階導入作業相當容易自訂，而且可重複使用 可根據應用程式中的不同用途進行調整。
實作內容如下所示：
