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

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

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

نمونه پایه

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

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

  1. DialWithDialogExample composable wraps TimePicker in a dialog.
  2. ‫TimePickerDialog یک ترکیب‌پذیر سفارشی است که یک AlertDialog با پارامترهای زیر ایجاد می‌کند:
    • onDismiss: تابعی که وقتی کاربر کادر گفتگو را می‌بندد (ازطریق دکمه بستن یا پیمایش برگشت) فراخوانی می‌شود.
    • onConfirm: تابعی که وقتی کاربر روی دکمه «تأیید» کلیک می‌کند فراخوانی می‌شود.
    • ‫content: یک composable که انتخاب‌گر ساعت را در کادر گفتگو نمایش می‌دهد.
  3. AlertDialog شامل موارد زیر است:
    • دکمه بستن با برچسب «بستن».
    • دکمه تأیید با برچسب «تأیید».
    • محتوای انتخابگر زمان به‌عنوان پارامتر text ارسال شد.
  4. ‫DialWithDialogExample، TimePickerState را با زمان فعلی مقداردهی اولیه می‌کند و آن را به هر دو تابع TimePicker و onConfirm ارسال می‌کند.
انتخاب‌گر زمان در AlertDialog که عنوان، دکمه جابه‌جایی حالت، و دکمه‌های رد کردن و تأیید را پیاده‌سازی می‌کند.
شکل ۱. انتخاب‌گر زمان در 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") }
                }
            }
        }
    }
}

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

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

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

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

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

منابع بیشتر