टाइम पिकर के लिए डायलॉग

टाइम पिकर अक्सर डायलॉग में दिखते हैं. आपके पास डायलॉग के लिए, सामान्य और कम से कम लागू करने का विकल्प है. इसके अलावा, ज़्यादा सुविधाओं के साथ कस्टम डायलॉग लागू किया जा सकता है.

डायलॉग बॉक्स के बारे में ज़्यादा जानकारी पाने के लिए, जिसमें टाइम पिकर इस्तेमाल करने का तरीका भी शामिल है राज्य में, टाइम पिकर गाइड देखें.

बुनियादी उदाहरण

टाइम पिकर के लिए डायलॉग बनाने का सबसे आसान तरीका यह है कि आप 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: जब उपयोगकर्ता "OK" पर क्लिक करता है, तब कॉल किया जाता है बटन.
    • content: ऐसा कॉम्पोज़ेबल जो डायलॉग में टाइम पिकर दिखाता है.
  3. AlertDialog में ये शामिल हैं:
    • "खारिज करें" लेबल वाला खारिज करें बटन.
    • "ठीक है" लेबल वाला पुष्टि करने वाला बटन.
    • text पैरामीटर के तौर पर पास किया गया टाइम पिकर कॉन्टेंट.
  4. DialWithDialogExample, TimePickerState को मौजूदा समय के साथ शुरू करता है और उसे TimePicker और onConfirm फ़ंक्शन, दोनों को पास करता है.
AlertsDialog में मौजूद टाइम पिकर, जो टाइटल, मोड टॉगल, और खारिज करने और पुष्टि करने वाले बटन को लागू करता है.
पहली इमेज. AlertsDialog में टाइम पिकर.

बेहतर उदाहरण

इस स्निपेट में, पसंद के मुताबिक समय को बेहतर तरीके से लागू किया गया है 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. यह AlertDialog की तुलना में ज़्यादा सुविधाओं के लिए, Dialog कॉम्पोज़ेबल का इस्तेमाल करता है.
  3. डायलॉग में पसंद के मुताबिक बनाया जा सकने वाला टाइटल और स्विच करने के लिए टॉगल बटन शामिल है डायल और इनपुट मोड के बीच स्विच कर सकते हैं.
  4. Surface, डायलॉग बॉक्स के आकार और ऊंचाई को लागू करता है. इसके लिए, चौड़ाई और ऊंचाई, दोनों के लिए IntrinsicSize.Min का इस्तेमाल किया जाता है.
  5. Column और Row लेआउट, डायलॉग के स्ट्रक्चर कॉम्पोनेंट उपलब्ध कराते हैं.
  6. इस उदाहरण में, showDial का इस्तेमाल करके पिकर मोड को ट्रैक किया गया है.
    • IconButton, मोड के बीच टॉगल करता है और आइकॉन को उसके हिसाब से अपडेट करता है.
    • डायलॉग का कॉन्टेंट, TimePicker और TimeInput के बीच स्विच करता है. ऐसा इन के आधार पर होता है showDial स्थिति.

इस बेहतर तरीके से लागू करने पर, टाइम पिकर डायलॉग को ज़रूरत के मुताबिक बनाया जा सकता है और उसे फिर से इस्तेमाल किया जा सकता है. यह डायलॉग, आपके ऐप्लिकेशन में इस्तेमाल के अलग-अलग उदाहरणों के हिसाब से बदल सकता है.

लागू होने पर यह ऐसा दिखता है:

कस्टम डायलॉग में टाइम पिकर, जिसमें टाइटल, मोड टॉगल, और खारिज करने और पुष्टि करने के बटन शामिल हैं.
दूसरी इमेज. पसंद के मुताबिक बनाए गए डायलॉग बॉक्स में टाइम पिकर.

अन्य संसाधन