توفّر أدوات اختيار الوقت طريقة للمستخدمين لاختيار وقت. يمكنك استخدام العنصرَين القابلَين للإنشاء 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") } } }
يجب مراعاة ما يلي في هذا المقتطف:
- تعمل السمة
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") } } }
في ما يلي النقاط الرئيسية التي يجب مراعاتها عند تنفيذ هذه العملية:
- البنية هي نفسها بشكل أساسي بنية أداة اختيار الوقت الدوّارة، مع الاختلاف الرئيسي في استخدام
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") } } }
يمكنك بعد ذلك استدعاء العنصر القابل للإنشاء على النحو التالي:
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.")
}
لمزيد من التفاصيل، اطّلِع على عملية التنفيذ الكاملة في تطبيق "مقتطفات".