دیالوگ‌هایی برای انتخاب‌کنندگان زمان

انتخابگرهای زمان اغلب در دیالوگ ها ظاهر می شوند. می توانید از اجرای نسبتاً عمومی و حداقلی یک گفتگو استفاده کنید یا می توانید یک گفتگوی سفارشی را با انعطاف بیشتری پیاده سازی کنید.

برای اطلاعات بیشتر در مورد دیالوگ ها به طور کلی، از جمله نحوه استفاده از حالت انتخابگر زمان، به راهنمای انتخابگر زمان مراجعه کنید.

مثال اساسی

ساده ترین راه برای ایجاد دیالوگ برای انتخابگر زمان شما این است که یک 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() }
    )
}
TimePickers.kt

به نکات کلیدی در این قطعه توجه کنید:

1. ترکیب‌پذیر DialWithDialogExample ، TimePicker در یک گفتگو می‌پیچد.
2. TimePickerDialog یک ترکیب سفارشی است که یک AlertDialog با پارامترهای زیر ایجاد می کند:
   • onDismiss : تابعی که وقتی کاربر گفتگو را رد می کند (از طریق دکمه رد کردن یا پیمایش به عقب) فراخوانی می شود.
   • onConfirm : تابعی که وقتی کاربر روی دکمه "OK" کلیک می کند، فراخوانی می شود.
   • content : قابل ترکیبی که انتخابگر زمان را در کادر گفتگو نمایش می دهد.
3. AlertDialog شامل:
   • یک دکمه رد کردن با برچسب "رد کردن".
   • یک دکمه تأیید با عنوان "OK".
   • محتوای انتخابگر زمان به عنوان پارامتر 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. Composable AdvancedTimePickerExample یک گفتگوی انتخابگر زمان قابل تنظیم ایجاد می کند.
2. برای انعطاف بیشتر از AlertDialog از یک Dialog قابل تنظیم استفاده می کند.
3. این گفتگو شامل یک عنوان قابل تنظیم و یک دکمه جابجایی برای جابجایی بین حالت شماره گیری و ورودی است.
4. Surface شکل و ارتفاع را به گفتگو اعمال می کند، با IntrinsicSize.Min هم برای عرض و هم برای ارتفاع.
5. طرح بندی Column و Row اجزای ساختار گفتگو را فراهم می کند.
6. مثال حالت انتخابگر را با استفاده از showDial ردیابی می کند.
   • یک IconButton بین حالت‌ها جابه‌جا می‌شود و نماد را متناسب با آن به‌روزرسانی می‌کند.
   • محتوای گفتگو بین TimePicker و TimeInput بر اساس حالت showDial جابجا می شود.

این پیاده سازی پیشرفته یک گفتگوی انتخابگر زمان بسیار قابل تنظیم و قابل استفاده مجدد را ارائه می دهد که می تواند با موارد استفاده مختلف در برنامه شما سازگار شود.

این پیاده سازی به صورت زیر ظاهر می شود:

شکل 2. یک انتخابگر زمان در یک گفتگوی سفارشی.

منابع اضافی

• راهنمای انتخاب کنندگان زمان
• طراحی متریال - انتخاب کنندگان زمان