時間挑選器

「時間挑選器」可讓使用者選取時間。你可以 使用 TimePicker 和 TimeInput 可組合函式來實作時間 應用程式中的挑選器。

類型

時間挑選器有兩種類型：

  • 撥號：允許使用者在轉盤周圍移動控點來設定時間。
  • 輸入：使用者可透過鍵盤設定時間。

下圖是左側的撥號時間挑選器範例，且 右側則是輸入時間挑選器：

撥號和輸入時間挑選器。
圖 1. 撥號和輸入時間挑選器。

API 介面

如要實作時間挑選器，請使用 TimePicker 或 TimeInput 可組合函式：

，瞭解如何調查及移除這項存取權。

狀態

對於 TimePicker 和 TimeInput，您也需要傳遞 TimePickerState。這樣就能設定預設顯示的時間 。也會擷取使用者使用 。

對話方塊

對話方塊會顯示時間挑選器。本指南中的範例不會使用對話方塊。 如需對話方塊的使用範例，請參閱「時間挑選器的對話方塊」指南。

撥號時間挑選器

以下程式碼片段示範如何實作基本撥號時間挑選器。

@Composable
fun DialExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

請參考這個程式碼片段中的下列做法：

  • Calendar.getInstance() 會使用目前的TimePickerState 讓應用程式從可以最快做出回應的位置 回應使用者要求
  • TimePicker 可組合函式會顯示時間挑選器，並 timePickerState 做為參數。
  • 導入作業包含兩個按鈕：一個用於確認選擇， 以關閉挑選器

實作內容如下所示：

撥號時間挑選器。使用者可以使用撥號功能選取時間。
圖 2. 撥號時間挑選器。

輸入時間挑選器

以下程式碼片段說明如何實作基本輸入樣式時間挑選器。

@Composable
fun InputExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimeInput(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

這次實作方式的重點如下：

  • 這個結構的結構基本上是撥號時間挑選器，而且 差異在於使用 TimeInput，而非 TimePicker。
  • timePickerState 的 is24Hour 參數已明確設為 true。 根據預設，這個值為 false。

實作內容如下所示：

輸入時間挑選器。使用者可以在文字欄位輸入時間。
圖 3. 輸入時間挑選器。

使用狀態

如要使用使用者在時間挑選器中選取的時間，請傳遞 適用於 onConfirm 函式的 TimePickerState。父項 這樣一來，可組合函式即可透過 TimePickerState.hour 和 TimePickerState.minute。

下列程式碼片段說明如何執行這項作業：

@Composable
fun DialUseStateExample(
    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,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = { onConfirm(timePickerState) }) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

接著，您可以按照以下方式呼叫可組合函式：

var selectedTime: TimePickerState? by remember { mutableStateOf(null) }

// ...

DialUseStateExample(
    onDismiss = {
        showDialExample = false
    },
    onConfirm = {
            time ->
        selectedTime = time
        showDialExample = false
    },
)

// ...

if (selectedTime != null) {
    val cal = Calendar.getInstance()
    cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
    cal.set(Calendar.MINUTE, selectedTime!!.minute)
    cal.isLenient = false
    Text("Selected time = ${formatter.format(cal.time)}")
} else {
    Text("No time selected.")
}

詳情請參閱程式碼片段中的完整導入說明 app。

其他資源