กล่องโต้ตอบสำหรับเครื่องมือเลือกเวลา

เครื่องมือเลือกเวลามักปรากฏในกล่องโต้ตอบ คุณสามารถใช้กล่องโต้ตอบแบบทั่วไปและใช้งานน้อยที่สุด หรือจะใช้กล่องโต้ตอบที่กําหนดเองซึ่งมีความยืดหยุ่นมากขึ้นก็ได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับกล่องโต้ตอบทั่วไป รวมถึงวิธีใช้เครื่องมือเลือกเวลาได้ที่คู่มือเครื่องมือเลือกเวลา

ตัวอย่างพื้นฐาน

วิธีที่ตรงที่สุดในการสร้างกล่องโต้ตอบสำหรับเครื่องมือเลือกเวลาคือการสร้างคอมโพสิชันที่ใช้ 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() }
    )
}
TimePickers.kt

โปรดทราบประเด็นสำคัญในข้อมูลโค้ดนี้

1. คอมโพสิเบิล DialWithDialogExample จะรวม TimePicker ในกล่องโต้ตอบ
2. TimePickerDialog คือคอมโพสิชันที่กําหนดเองซึ่งสร้าง AlertDialog ด้วยพารามิเตอร์ต่อไปนี้
   • onDismiss: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้ปิดกล่องโต้ตอบ (ผ่านปุ่มปิดหรือไปยังส่วนต่างๆ กลับ)
   • onConfirm: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้คลิกปุ่ม "ตกลง"
   • content: คอมโพสิชันที่แสดงเครื่องมือเลือกเวลาภายในกล่องโต้ตอบ
3. AlertDialog ประกอบด้วยรายการต่อไปนี้
   • ปุ่มปิดที่มีป้ายกำกับ "ปิด"
   • ปุ่มยืนยันที่มีป้ายกำกับ "ตกลง"
   • เนื้อหาเครื่องมือเลือกเวลาซึ่งส่งผ่านเป็นพารามิเตอร์ text
4. DialWithDialogExample จะเริ่มต้น TimePickerState ด้วยเวลาปัจจุบันและส่งไปยังทั้งฟังก์ชัน TimePicker และ onConfirm

รูปที่ 1 เครื่องมือเลือกเวลาใน AlertDialog

ตัวอย่างขั้นสูง

ข้อมูลโค้ดนี้แสดงการใช้งานขั้นสูงของกล่องโต้ตอบเครื่องมือเลือกเวลาที่ปรับแต่งได้ใน 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") }
                }
            }
        }
    }
}
TimePickers.kt

โปรดทราบประเด็นสำคัญในข้อมูลโค้ดนี้

1. คอมโพสิเบิล AdvancedTimePickerExample จะสร้างกล่องโต้ตอบเครื่องมือเลือกเวลาที่ปรับแต่งได้
2. โดยใช้คอมโพสิชัน Dialog เพื่อความยืดหยุ่นมากกว่า AlertDialog
3. กล่องโต้ตอบจะมีชื่อที่ปรับแต่งได้และปุ่มเปิด/ปิดเพื่อสลับระหว่างโหมดหน้าปัดและโหมดอินพุต
4. Surface ใช้รูปร่างและระดับความสูงกับกล่องโต้ตอบ โดยมี IntrinsicSize.Min สำหรับทั้งความกว้างและความสูง
5. เลย์เอาต์ Column และ Row มีคอมโพเนนต์โครงสร้างของกล่องโต้ตอบ
6. ตัวอย่างนี้ติดตามโหมดเครื่องมือเลือกโดยใช้ showDial
   • IconButton จะสลับระหว่างโหมดต่างๆ โดยอัปเดตไอคอนให้สอดคล้องกัน
   • เนื้อหากล่องโต้ตอบจะสลับระหว่าง TimePicker กับ TimeInput โดยอิงตามสถานะ showDial

การใช้งานขั้นสูงนี้ช่วยให้กล่องโต้ตอบเครื่องมือเลือกเวลาแบบปรับแต่งได้สูงและนํามาใช้ซ้ำได้ ซึ่งสามารถปรับให้เข้ากับกรณีการใช้งานต่างๆ ในแอป

การติดตั้งใช้งานนี้จะปรากฏดังนี้

รูปที่ 2 เครื่องมือเลือกเวลาในกล่องโต้ตอบที่กำหนดเอง

แหล่งข้อมูลเพิ่มเติม

• คู่มือเครื่องมือเลือกเวลา
• Material Design - เครื่องมือเลือกเวลา