เครื่องมือเลือกเวลามักปรากฏในกล่องโต้ตอบ คุณสามารถใช้ตัวกรอง ใช้งานกล่องโต้ตอบน้อยที่สุด หรือคุณสามารถใช้กล่องโต้ตอบที่กำหนดเอง มีความยืดหยุ่นมากขึ้น
ดูข้อมูลเพิ่มเติมเกี่ยวกับกล่องโต้ตอบโดยทั่วไป รวมถึงวิธีใช้เครื่องมือเลือกเวลา โปรดดูคำแนะนำเกี่ยวกับเครื่องมือเลือกเวลา
ตัวอย่างพื้นฐาน
วิธีที่ง่ายที่สุดในการสร้างกล่องโต้ตอบสำหรับเครื่องมือเลือกเวลาคือ
สร้าง Composable ที่ใช้ 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
Composable จะรวมTimePicker
ในกล่องโต้ตอบTimePickerDialog
เป็น Composable ที่กำหนดเองที่สร้างAlertDialog
ด้วย พารามิเตอร์ต่อไปนี้onDismiss
: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้ปิดกล่องโต้ตอบ (ผ่าน ปุ่มปิดหรือการนำทางกลับ)onConfirm
: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้คลิกปุ่ม "ตกลง"content
: Composable ที่แสดงเครื่องมือเลือกเวลาภายในกล่องโต้ตอบ
AlertDialog
ประกอบด้วย- ปุ่มปิดที่มีป้ายกำกับว่า "ปิด"
- ปุ่มยืนยันที่มีป้ายกำกับว่า "ตกลง"
- เนื้อหาของเครื่องมือเลือกเวลาที่ส่งผ่านเป็นพารามิเตอร์
text
DialWithDialogExample
จะเริ่มต้นTimePickerState
ด้วย เวลาปัจจุบันและส่งไปยังทั้งTimePicker
และonConfirm
![เครื่องมือเลือกเวลาใน AlertDialog ที่ใช้ชื่อ ปุ่มเปิด/ปิดโหมด รวมถึงปุ่มปิดและยืนยัน](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-basic.png?hl=th)
ตัวอย่างขั้นสูง
ข้อมูลโค้ดนี้แสดงการใช้งานขั้นสูงของเวลาที่กำหนดเอง กล่องโต้ตอบเครื่องมือเลือกใน 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
Composable จะสร้างเวลาที่ปรับแต่งได้ กล่องโต้ตอบเครื่องมือเลือก- ใช้
Dialog
Composable เพื่อให้มีความยืดหยุ่นมากกว่าAlertDialog
- กล่องโต้ตอบนี้มีชื่อที่ปรับแต่งได้และปุ่มเปิด/ปิดสำหรับเปลี่ยน ระหว่างโหมดการโทรและโหมดป้อนข้อมูล
Surface
จะใช้รูปร่างและระดับความสูงกับกล่องโต้ตอบIntrinsicSize.Min
สำหรับทั้งความกว้างและความสูง- เลย์เอาต์
Column
และRow
มีคอมโพเนนต์โครงสร้างของกล่องโต้ตอบ - ตัวอย่างนี้ติดตามโหมดเครื่องมือเลือกโดยใช้
showDial
IconButton
จะสลับระหว่างโหมดต่างๆ และอัปเดตไอคอนให้สอดคล้องกัน- เนื้อหาในกล่องโต้ตอบจะเปลี่ยนระหว่าง
TimePicker
และTimeInput
ตาม สถานะshowDial
การติดตั้งใช้งานขั้นสูงนี้ทำให้สามารถปรับแต่งและนำกลับมาใช้ซ้ำได้อย่างมาก กล่องโต้ตอบเครื่องมือเลือกที่สามารถปรับให้เข้ากับกรณีการใช้งานต่างๆ ในแอปของคุณ
การติดตั้งใช้งานนี้จะปรากฏดังนี้
![เครื่องมือเลือกเวลาในกล่องโต้ตอบที่กําหนดเองซึ่งใช้ชื่อ ปุ่มเปิด/ปิดโหมด รวมถึงปุ่มปิดและยืนยัน](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-advanced.png?hl=th)