أدوات اختيار الوقت

توفِّر أداة اختيار الوقت طريقة تمكّن المستخدمين من اختيار الوقت. يمكنك استخدام العنصرَين القابلَين للإنشاء TimePicker وTimeInput لتنفيذ وقت في تطبيقك.

الأنواع

هناك نوعان من أداة اختيار الوقت:

• الاتصال: تتيح للمستخدمين تحديد الوقت من خلال تحريك مقبض خلال قرص.
• الإدخال: يسمح للمستخدمين بتحديد وقت باستخدام لوحة المفاتيح.

تقدم الصورة التالية مثالاً لأداة اختيار وقت الاتصال على اليسار، أداة اختيار وقت الإدخال على اليسار:

مساحة عرض واجهة برمجة التطبيقات

لاستخدام أداة اختيار الوقت، استخدِم TimePicker أو TimeInput. قابل للإنشاء:

• TimePicker: تنفيذ أداة اختيار وقت الاتصال
• TimeInput: تنفيذ أداة اختيار وقت الإدخال

الولاية

على كل من TimePicker وTimeInput، عليك أيضًا اجتياز TimePickerState يتيح لك هذا الإجراء ضبط الوقت التلقائي المحدَّد الذي يظهر. في أداة الاختيار. كما يعرض الوقت الذي حدده المستخدم باستخدام المنتقي.

مربّع حوار

تظهر منتقي الوقت في مربّعات الحوار. لا تستخدم الأمثلة في هذا الدليل مربّعات الحوار. للحصول على أمثلة تستخدم مربّعات الحوار، يُرجى الاطّلاع على دليل مربّعات حوار لأدوات اختيار الوقت.

منتقي وقت الاتصال

يوضح هذا المقتطف كيفية استخدام أداة اختيار وقت الاتصال الأساسية.

@Composable
fun DialExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

فكِّر في ما يلي في هذا المقتطف:

• يقوم Calendar.getInstance() بإعداد TimePickerState باستخدام الدالة الحالية الوقت.
  • يستخدم هذا المثال السمة java.util.Calendar. تمكين Java أكثر من 8 إزالة درجات من واجهات برمجة التطبيقات في مشروعك لاستخدامها بدلاً من ذلك java.time.LocalTime في جميع إصدارات Android
• تعرض TimePicker القابلة للإنشاء أداة اختيار الوقت، مع timePickerState كمَعلمة.
• تتضمّن عملية التنفيذ زرَّين: أحدهما لتأكيد الاختيار وآخر لإزالة أداة الاختيار.

تظهر طريقة التنفيذ هذه على النحو التالي:

منتقي وقت الإدخال

يوضح هذا المقتطف كيفية تطبيق أداة اختيار وقت أساسية لنمط الإدخال.

@Composable
fun InputExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimeInput(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

في ما يلي النقاط الرئيسية التي يجب مراعاتها في عملية التنفيذ هذه:

• الهيكل هو في الأساس نفس منتقي وقت الاتصال، مع يتمثل في استخدام TimeInput بدلاً من TimePicker.
• تم ضبط المعلَمة is24Hour لـ timePickerState بشكلٍ صريح على true. وبشكل تلقائي، تكون هذه القيمة هي false.

تظهر طريقة التنفيذ هذه على النحو التالي:

استخدام الولاية

للاستفادة من الوقت الذي اختاره المستخدم في منتقي الوقت، اضبط TimePickerState لدالة onConfirm. أحد الوالدَين قابل للإنشاء يمكنه الوصول إلى الوقت المحدّد من خلال TimePickerState.hour TimePickerState.minute

يوضح المقتطف التالي كيفية إجراء ذلك:

@Composable
fun DialUseStateExample(
    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,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = { onConfirm(timePickerState) }) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

يمكنك بعد ذلك تسمية العنصر القابل للإنشاء على النحو التالي:

var selectedTime: TimePickerState? by remember { mutableStateOf(null) }

// ...

DialUseStateExample(
    onDismiss = {
        showDialExample = false
    },
    onConfirm = {
            time ->
        selectedTime = time
        showDialExample = false
    },
)

// ...

if (selectedTime != null) {
    val cal = Calendar.getInstance()
    cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
    cal.set(Calendar.MINUTE, selectedTime!!.minute)
    cal.isLenient = false
    Text("Selected time = ${formatter.format(cal.time)}")
} else {
    Text("No time selected.")
}

لمزيد من التفاصيل، اطّلِع على التنفيذ الكامل في المقتطفات. التطبيق.

مصادر إضافية

• TimePicker
• التصميم المتعدد الأبعاد - أداة اختيار الوقت