সময় বাছাইকারীদের জন্য ডায়ালগ

সময় বাছাইকারীরা প্রায়ই ডায়ালগে উপস্থিত হয়। আপনি একটি ডায়ালগের তুলনামূলক জেনেরিক এবং ন্যূনতম বাস্তবায়ন ব্যবহার করতে পারেন, অথবা আপনি আরও নমনীয়তার সাথে একটি কাস্টম ডায়ালগ প্রয়োগ করতে পারেন।

টাইম পিকার স্টেট কিভাবে ব্যবহার করতে হয় সহ সাধারণভাবে ডায়ালগ সম্পর্কে আরও তথ্যের জন্য, টাইম পিকার গাইড দেখুন।

মৌলিক উদাহরণ

আপনার সময় চয়নকারীর জন্য একটি ডায়ালগ তৈরি করার সবচেয়ে সহজ উপায় হল একটি কম্পোজযোগ্য তৈরি করা যা 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 এর মধ্যে রয়েছে:
   • "খারিজ" লেবেলযুক্ত একটি খারিজ বোতাম।
   • "ঠিক আছে" লেবেলযুক্ত একটি নিশ্চিত বোতাম।
   • টাইম পিকার কন্টেন্ট text প্যারামিটার হিসেবে পাস করা হয়েছে।
4. DialWithDialogExample বর্তমান সময়ের সাথে TimePickerState আরম্ভ করে এবং এটিকে TimePicker এবং onConfirm ফাংশনে পাস করে।

উন্নত উদাহরণ

এই স্নিপেট জেটপ্যাক কম্পোজে একটি কাস্টমাইজযোগ্য সময় পিকার ডায়ালগের একটি উন্নত বাস্তবায়ন প্রদর্শন করে।

@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. এটি AlertDialog এর চেয়ে বেশি নমনীয়তার জন্য একটি Dialog কম্পোজযোগ্য ব্যবহার করে।
3. ডায়লগটিতে একটি কাস্টমাইজযোগ্য শিরোনাম এবং ডায়াল এবং ইনপুট মোডগুলির মধ্যে স্যুইচ করার জন্য একটি টগল বোতাম রয়েছে৷
4. প্রস্থ এবং উচ্চতা উভয়ের জন্য IntrinsicSize.Min সহ, Surface ডায়ালগে আকৃতি এবং উচ্চতা প্রয়োগ করে।
5. Column এবং Row লেআউট ডায়ালগের গঠন উপাদান প্রদান করে।
6. উদাহরণটি showDial ব্যবহার করে পিকার মোড ট্র্যাক করে।
   • একটি IconButton মোডগুলির মধ্যে টগল করে, সেই অনুযায়ী আইকন আপডেট করে।
   • showDial অবস্থার উপর ভিত্তি করে ডায়ালগ বিষয়বস্তু TimePicker এবং TimeInput মধ্যে স্যুইচ করে।

এই উন্নত বাস্তবায়ন একটি অত্যন্ত কাস্টমাইজযোগ্য এবং পুনঃব্যবহারযোগ্য টাইম পিকার ডায়ালগ প্রদান করে যা আপনার অ্যাপের বিভিন্ন ব্যবহারের ক্ষেত্রে মানিয়ে নিতে পারে।

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

অতিরিক্ত সম্পদ

• সময় বাছাইকারী গাইড
• মেটেরিয়াল ডিজাইন - টাইম পিকার