เครื่องมือเลือกเวลาช่วยให้ผู้ใช้เลือกเวลาได้ คุณสามารถ
ใช้คอมโพสได้ TimePicker และ TimeInput เพื่อติดตั้งเครื่องมือเลือกเวลาในแอป
ประเภท
เครื่องมือเลือกเวลามี 2 ประเภท ได้แก่
- แบบหมุน: ให้ผู้ใช้ตั้งเวลาโดยเลื่อนที่จับรอบๆ หน้าปัด
- แบบป้อน: ให้ผู้ใช้ตั้งเวลาโดยใช้แป้นพิมพ์
รูปภาพต่อไปนี้แสดงตัวอย่างเครื่องมือเลือกเวลาแบบหมุนทางด้านซ้าย และเครื่องมือเลือกเวลาแบบป้อนทางด้านขวา
แพลตฟอร์ม API
หากต้องการติดตั้งเครื่องมือเลือกเวลา ให้ใช้คอมโพสได้ TimePicker หรือ TimeInput
TimePicker: ติดตั้งเครื่องมือเลือกเวลาแบบหมุนTimeInput: ติดตั้งเครื่องมือเลือกเวลาแบบป้อน
สถานะ
สำหรับทั้ง TimePicker และ TimeInput คุณต้องส่ง a
TimePickerState ด้วย ซึ่งจะช่วยให้คุณตั้งเวลาที่เลือกไว้เริ่มต้นที่จะปรากฏในเครื่องมือเลือกได้ รวมถึงบันทึกเวลาที่ผู้ใช้เลือกโดยใช้เครื่องมือเลือกด้วย
Dialog
เครื่องมือเลือกเวลาจะปรากฏในกล่องโต้ตอบ ตัวอย่างในคู่มือนี้ไม่ได้ใช้กล่องโต้ตอบ หากต้องการดูตัวอย่างที่ใช้กล่องโต้ตอบ โปรดดูคู่มือกล่องโต้ตอบสำหรับเครื่องมือเลือกเวลา
เครื่องมือเลือกเวลาแบบหมุน
ข้อมูลโค้ดนี้แสดงวิธีติดตั้งเครื่องมือเลือกเวลาแบบหมุนพื้นฐาน
@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") } } }
โปรดพิจารณาสิ่งต่อไปนี้ในข้อมูลโค้ด
Calendar.getInstance()จะเริ่มต้นTimePickerStateด้วยเวลาปัจจุบัน- ตัวอย่างนี้ใช้
java.util.Calendarเปิดใช้กระบวนการ Desugaring API ของ Java 8 ขึ้นไปในโปรเจ็กต์เพื่อใช้java.time.LocalTimeใน Android ทุกเวอร์ชันแทน
- ตัวอย่างนี้ใช้
- คอมโพสได้
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") } } }
ประเด็นสำคัญที่ควรทราบในการติดตั้งนี้
- โครงสร้างโดยพื้นฐานแล้วจะเหมือนกับเครื่องมือเลือกเวลาแบบหมุน โดยมีความแตกต่างหลักคือการใช้
TimeInputแทนTimePicker - พารามิเตอร์
is24HourสำหรับtimePickerStateจะตั้งค่าเป็นtrueอย่างชัดเจน โดยค่าเริ่มต้น ค่านี้จะเป็นfalse
การใช้งานนี้จะปรากฏดังนี้
ใช้สถานะ
หากต้องการใช้เวลาที่ผู้ใช้เลือกในเครื่องมือเลือกเวลา ให้ส่ง TimePickerState ที่เหมาะสมไปยังฟังก์ชัน onConfirm จากนั้นคอมโพสได้ระดับบนจะเข้าถึงเวลาที่เลือกผ่าน 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") } } }
จากนั้นคุณจะเรียกคอมโพสได้ดังนี้
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.")
}
ดูรายละเอียดเพิ่มเติมได้ที่การติดตั้งแบบเต็มในแอปข้อมูลโค้ด