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

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

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

مثال پایه

ساده‌ترین راه برای ایجاد کادر گفتگوی انتخابگر زمان این است که یک عنصر ترکیب‌شدنی ایجاد کنید که 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() }
    )
}

نکات کلیدی این گزیده را یادداشت کنید:

  1. ترکیب‌پذیر DialWithDialogExample TimePicker را در کادر گفتگو می‌پیچد.
  2. ‫TimePickerDialog یک عنصر ترکیبی سفارشی است که AlertDialog را با پارامترهای زیر ایجاد می‌کند:
    • onDismiss: تابعی که وقتی کاربر کادر گفتگو را می‌بندد (ازطریق دکمه بستن یا پیمایش به عقب) فراخوانی می‌شود.
    • onConfirm: تابعی که وقتی کاربر روی دکمه «تأیید» کلیک می‌کند فراخوانی می‌شود.
    • ‫content: ترکیبی که انتخاب‌گر زمان را در کادر گفتگو نمایش می‌دهد.
  3. AlertDialog شامل موارد زیر است:
    • دکمه بستن با برچسب «بستن».
    • دکمه تأییدی با برچسب «تأیید».
    • محتوای انتخاب‌گر زمان به‌عنوان پارامتر text ارسال شد.
  4. ‫DialWithDialogExample TimePickerState را با زمان فعلی مقداردهی اولیه می‌کند و آن را به هر دو تابع TimePicker و onConfirm منتقل می‌کند.
انتخاب‌گر زمان در «کادر گفتگوی هشدار» که عنوان، کلید تغییر حالت، و دکمه‌های بستن و تأیید را پیاده‌سازی می‌کند.
شکل ۱. انتخاب‌گر زمان در «کادر گفتگوی هشدار».

نمونه پیشرفته

این تکه‌کد پیاده‌سازی پیشرفته‌ای از کادر گفتگوی انتخابگر زمان سفارشی‌شدنی در 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") }
                }
            }
        }
    }
}

نکات کلیدی این گزیده را یادداشت کنید:

  1. عنصر ترکیبی AdvancedTimePickerExample کادر گفتگوی انتخابگر زمان قابل‌سفارشی‌سازی ایجاد می‌کند.
  2. از Dialog قابل ترکیب برای انعطاف‌پذیری بیشتر نسبت‌به AlertDialog استفاده می‌کند.
  3. این کادر گفتگو شامل عنوان قابل‌سفارشی‌سازی و دکمه‌ای برای جابه‌جایی بین حالت‌های شماره‌گیری و ورودی است.
  4. Surface شکل و ارتفاع را با IntrinsicSize.Min برای عرض و ارتفاع به چارگوش اعمال می‌کند.
  5. چیدمان Column و Row عناصر ساختاری گفتگوی را فراهم می‌کنند.
  6. این مثال حالت انتخابگر را بااستفاده از showDial ردیابی می‌کند.
    • IconButton بین حالت‌ها جابه‌جا می‌شود و نماد را متناسب با آن به‌روز می‌کند.
    • محتوای کادر گفتگو براساس وضعیت showDial بین TimePicker و TimeInput تغییر می‌کند.

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

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

انتخاب‌گر زمان در کادر گفتگوی سفارشی که عنوان، کلید تغییر حالت، و دکمه‌های بستن و تأیید را پیاده‌سازی می‌کند.
شکل ۲. انتخاب‌گر زمان در کادر گفتگوی سفارشی.

منابع بیشتر