أدوات اختيار الوقت
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يساعد أداة الاختيار المستخدمين في اختيار بيانات معيّنة وضبطها.
أداة الاختيار
يجب استخدام أدوات الاختيار للسماح للمستخدمين بالاختيار من بين عدد محدود من العناصر.
سيتم تكرار العناصر تلقائيًا بشكل لانهائي في كلا الاتجاهين. ننصحك بإيقاف هذا السلوك إذا كان الترتيب في القائمة مهمًا، أو للسماح للمستخدمين بالوصول إلى العنصر الأول والأخير من خلال التمرير سريعًا.
علم التشريح
البنية
أ. العمود غير النشط
ب. Colon Breaker
ج. عمود أداة الاختيار
د. أهم المحتوى
هـ. المحتوى الأوسط
و. المحتوى في أسفل الصفحة
العرض والارتفاع
تملأ مجموعة "أداة الاختيار" الارتفاع والعرض المتاحَين. هناك أربعة خيارات للتخطيط لأعمدة أداة الاختيار. يتم وضع كل تنسيق في المنتصف وملء الارتفاع المتاح. يتم تحديد عرض الأعمدة حسب العرض المطلوب لاستيعاب عدد الأرقام المطلوبة في الخط، باستثناء أداة اختيار التاريخ التي تملأ الشاشة أفقيًا وتتجاوز الحافة.
على سبيل المثال، ستحسب الأرقام عرض "00" ثم تضبط العرض. بالنسبة إلى الحقول النصية، مثل حقل الشهر، سيتم احتساب العرض على أنّه عرض "MMM" (وهو أوسع حرف في الأبجدية اللاتينية). وبالتالي، سيتأثر العرض والارتفاع (وهو ارتفاع السطر لأسلوب الكتابة المستخدَم) بالخط المستخدَم.
يختلف حجم عناصر أداة الاختيار على مستوى نقطة التوقف.
الاستخدام
اطّلِع على الأمثلة التالية لأدوات اختيار التاريخ والوقت.
لتنفيذ أداة اختيار التاريخ والوقت مُسبقة الإنشاء، يمكنك الاطّلاع على Horologist Library على GitHub.
إذا كنت تريد إنشاء تجربة مشابهة، حيث يختار المستخدمون قيمة متعددة الأجزاء من بين أدوات اختيار متعددة، استخدِم المكوّن المضمّن PickerGroup. يستخدم هذا الكائن كائنًا منسِّقًا للتركيز لتحديد التركيز على عنصر "أداة الاختيار" الصحيح.
التنسيقات التكيُّفية
TimePicker 24H
TimePicker 12H
أداة اختيار التاريخ
السلوك الاستباقي
زيادة حجم النص
بعد نقطة التوقف التي تزيد عن 225، يتغيّر حجم خط عنصر "أداة الاختيار". يتم تعديل نسختَي "أعلى" و"أسفل" ضمن عمود "الانتقال السلس للمحتوى" (أ)، كما هو الحال مع النسخة "الأوسط". في ما يلي بعض الأمثلة على ذلك:
تنسيق من عمودَين
أدنى من نقطة الإيقاف التي تبلغ 225 dp
الخط: Display 2
أعلى من نقطة الإيقاف التي تبلغ 225 نقطة كثافة بكسل
الخط: شاشة 1
تنسيق من ثلاثة أعمدة
أدنى من نقطة الإيقاف التي تبلغ 225 dp
الخط: شاشة 3
أعلى من نقطة الإيقاف التي تبلغ 225 dp
الخط: شاشة 2
زيادة حجم التدرّج
يتم تحديد ارتفاع التدرّج في عمود "أداة الاختيار" حسب المساحة المتوفّرة. يتم ضبط كلا من التدرّج العلوي والسفلي على ثلث (33%) من الارتفاع المتاح. وهذا يعني أنّه في كل حجم شاشة متاح، يتم تكبير التدرّج بشكلٍ نسبي. تكون مستقلة عن تنسيق الأعمدة.
أدنى من نقطة الإيقاف التي تبلغ 225 dp
الحجم: 33% من ارتفاع العمود
أعلى من نقطة الإيقاف التي تبلغ 225 نقطة كثافة بكسل
الحجم: 33% من ارتفاع العمود
زيادة تباعد الأعمدة
يتم تكبير المسافة بين الأعمدة بعد نقطة التوقف التي تزيد عن 225، إما من 2 dp أو 4 dp إلى 6 dp. يعتمد ذلك على التنسيق الذي اخترته، سواء كان تنسيقًا من عمودَين أو 3 أعمدة.
تنسيق من عمودَين
أدنى من نقطة الإيقاف التي تبلغ 225 dp
تباعد الأعمدة 4 نقاط كثافة
أعلى من نقطة الإيقاف التي تبلغ 225 نقطة كثافة بكسل
6 نقاط تباعد بين الأعمدة
تنسيق من ثلاثة أعمدة
أدنى من نقطة الإيقاف التي تبلغ 225 نقطة كثافة بكسل
تباعد الأعمدة 2 نقطة كثافة
أعلى من نقطة الإيقاف التي تبلغ 225 نقطة كثافة بكسل
6 نقاط تباعد بين الأعمدة
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Pickers\n\nThe [Picker](/reference/kotlin/androidx/wear/compose/material/package-summary#Picker(androidx.wear.compose.material.PickerState,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.material.ScalingParams,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Function2)) helps users select and set specific data. \n**Picker**\n\nPickers should be used to let users choose amongst a finite number of items. \n\nBy default items will be looped infinitely in both directions. Consider disabling this behaviour if order in the list is important, or to allow users to reach the first and last element with a quick swipe.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\n**Anatomy**\n\nA. Inactive Column \n\nB. Colon Breaker \n\nC. Picker Column \n\nD. Top Content \n\nE. Middle Content \n\nF. Bottom Content\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Widths and heights**\n\nThe Picker Group fills the available height and width. There are four layout options for the picker columns. Each layout is centred and fills the available height. Column widths are defined by the width needed to accommodate the number of digits needed in the font, Date-picker is the exception, horizontally it fills the screen and bleeds off the edge.\n\nFor example numbers will work out width of '00' is and then set the width. For text fields, for the month field for example, will be worked out as the width of 'MMM' (which is the widest letter in the latin alphabet). The width and height (which is the line height of that type style used) will therefore be affected by the font used.\n\nPicker items vary in size across the breakpoint.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nSee the following examples of Date and Time Pickers\n\nFor a prebuilt date and time picker implementation, check out the [Horologist Library](https://github.com/google/horologist#-composables) on GitHub. \n\n\nIf you want to create a similar experience, where users choose a multi-part value across multiple pickers, use the built-in [PickerGroup](/reference/kotlin/androidx/wear/compose/material/package-summary#PickerGroup(kotlin.Array,androidx.compose.ui.Modifier,androidx.wear.compose.material.PickerGroupState,kotlin.Function1,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.TouchExplorationStateProvider,kotlin.Function1)) component. This object uses a focus coordinator object to assign focus to the correct Picker element.\n\nAdaptive layouts\n----------------\n\n**TimePicker 24H**\n\n**TimePicker 12H**\n\n**Date Picker**\n\n**Responsive behavior**\n-----------------------\n\n### **Text size increase**\n\nPast the 225+ Breakpoint, the Picker element's font size changes. Top and Bottom copy within the lazy scrolling column adjusts (A), as does the Middle copy. Below are some examples of this:\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 2 \n**Above 225 dp breakpoint**\n\nFont: Display 1\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Three column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 3 \n**Above the 225 dp breakpoint**\n\nFont: Display 2\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Gradient size increase**\n--------------------------\n\nThe gradient on the Picker column is defined in height by the available space. Both Top and Bottom Gradients are set at a third (33%) of the available height. This means at each available screen size, the gradient scales proportionally. Sitting independent of the column layout. \n**Below the 225 dp breakpoint**\n\nSize: 33% of column height \n**Above the 225 dp breakpoint**\n\nSize: 33% of column height\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Column spacing increase**\n---------------------------\n\nColumn spacing scales past the 225+ Breakpoint, either starting at 2 dp or 4 dp and growing to 6 dp. This depends on which layout you've selected; either 2 or 3 column layouts\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\n4 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Three column layout**\n\n**Below the 225 dp breakpoint**\n\n2 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
