القيود وترتيب مفاتيح التعديل

في ميزة "الإنشاء"، يمكنك ربط عدّة عوامل تعديل معًا لتغيير مظهر العنصر المركب وأسلوبه. يمكن أن تؤثّر سلاسل المُعدِّلات هذه في القيود التي يتم تمريرها إلى العناصر القابلة للتجميع، والتي تحدّد حدود العرض والارتفاع.

توضّح هذه الصفحة كيفية تأثير المُعدِّلات المتسلسلة في القيود، وبالتالي في قياس العناصر القابلة للتجميع ووضعها.

مفاتيح التعديل في شجرة واجهة المستخدم

لفهم كيفية تأثير المُعدِّلات في بعضها البعض، من المفيد الاطّلاع على كيفية ظهورها في شجرة واجهة المستخدم التي يتم إنشاؤها أثناء مرحلة التركيب. للحصول على مزيد من المعلومات، يُرجى الاطّلاع على قسم التركيب.

في شجرة واجهة المستخدم، يمكنك عرض المُعدِّلات كنُوى ملفّقة لعناصر ملفّق التنسيق:

تؤدي إضافة أكثر من مفتاح تعديل واحد إلى عنصر قابل للتجميع إلى إنشاء سلسلة من مفاتيح التعديل. عند ربط عدّة عناصر تعديل، تلفّ كلّ عقدة تعديل بقية السلسلة وعقدة التنسيق ضمنها. على سبيل المثال، عند ربط عنصر clip وsize، تلتفّ عقدة المُعدِّل clip حول عقدة المُعدِّل size، ثم تلتفّ حول عقدة التنسيق Image.

في مرحلة التنسيق، تظل الخوارزمية التي تنتقل في الشجرة كما هي، ولكن يتم أيضًا الانتقال إلى كل عقدة مُعدِّلة. بهذه الطريقة، يمكن للمُعدِّل تغيير متطلبات الحجم وموضع المُعدِّل أو عقدة التنسيق التي يلفها.

كما هو موضّح في الشكل 2، يتألّف تنفيذ العنصرَين القابلَين للتجميع Image وText من سلسلة من المُعدِّلات التي تلتفّ حول عقدة تخطيط واحدة. إنّ عمليات تنفيذ Row وColumn هي ببساطة عقد تنسيق تصف كيفية تنسيق عناصرها الثانوية.

باختصار:

• تلتفّ المُعدِّلات حول مُعدِّل واحد أو عقدة تنسيق واحدة.
• يمكن أن تُعدّد عقد التنسيق عقدًا فرعية متعددة.

توضّح الأقسام التالية كيفية استخدام هذا النموذج الذهني للتفكير في تسلسل المُعدِّلات وتأثيره في حجم العناصر القابلة للتجميع.

القيود في مرحلة التنسيق

تتّبع مرحلة التنسيق خوارزمية من ثلاث خطوات للعثور على العرض والارتفاع والإحداثيَين x وy لكل تنسيق عقدة:

1. قياس العناصر الفرعية: تقيس العقدة عناصرها الفرعية، إن توفّرت.
2. تحديد الحجم الخاص بها: استنادًا إلى هذه القياسات، تحدّد العقدة حجمها.
3. وضع العناصر الفرعية: يتم وضع كل عنصر فرعي بالنسبة إلى موضع العنصر.

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

أنواع القيود

يمكن أن يكون القيد أحد العناصر التالية:

• محدودة: تحتوي العقدة على حدّ أقصى وحدود أدنى للعرض والارتفاع.

• غير محدود: لا تكون العقدة مقيّدة بأي حجم. يتم ضبط الحد الأقصى لحدود العرض والارتفاع على ما لا نهاية.

• دقيق: يُطلب من العقدة اتّباع متطلّبات حجم دقيق. يتم ضبط الحدود الدنيا والقصوى على القيمة نفسها.

• التركيبة: تتّبع العقدة مجموعة من أنواع القيود المذكورة أعلاه. على سبيل المثال، يمكن أن يحدّ القيد من العرض مع السماح بحد أقصى غير محدود للارتفاع، أو ضبط عرض دقيق ولكن مع توفير ارتفاع محدود.

يصف القسم التالي كيفية نقل هذه القيود من العنصر الرئيسي إلى العنصر التابع.

كيفية تمرير القيود من العنصر الرئيسي إلى العنصر الفرعي

خلال الخطوة الأولى من الخوارزمية الموضّحة في القيود في مرحلة تخطيط العناصر، يتمّ تمرير القيود من العنصر الرئيسي إلى العنصر الفرعي في شجرة واجهة المستخدم.

عندما تقيس عقدة رئيسية العقد الفرعية، تقدّم هذه القيود لكل عقدة فرعية لإعلامها بالحجم المسموح به. بعد ذلك، عندما يتم تحديد حجمه، يتم أيضًا الالتزام بالقيود التي تم تمريرها من قِبل والدَيه.

على مستوى عالٍ، تعمل الخوارزمية على النحو التالي:

1. لتحديد الحجم الذي تريده فعليًا، تقيس العقدة الجذر في شجرة واجهة المستخدم العناصر التابعة لها وتعيد توجيه القيود نفسها إلى العنصر الأول منها.
2. إذا كان العنصر الثانوي هو مُعدِّل لا يؤثّر في القياس، يتمّ إعادة توجيه القيود إلى المُعدِّل التالي. يتمّ تمرير القيود إلى أسفل سلسلة المُعدِّل كما هي ما لم يتمّ الوصول إلى مُعدِّل يؤثّر في القياس. ويتم بعد ذلك إعادة ضبط القيود وفقًا لذلك.
3. بعد الوصول إلى عقدة لا تحتوي على أيّ عقد فرعية (يُشار إليها باسم "عقدة ورقية")، يتم تحديد حجمها استنادًا إلى القيود التي تم تمريرها، ويُرسَل هذا الحجم الذي تمّ حلّه إلى العقدة الرئيسية.
4. يُعدّل العنصر الرئيسي القيود استنادًا إلى قياسات هذا العنصر الفرعي، ويُطلِق اسم العنصر الفرعي التالي عليه مع هذه القيود المعدَّلة.
5. بعد قياس جميع العناصر الفرعية للعنصر الرئيسي، تحدّد العقدة الرئيسية حجمها الخاص وتُعلم العنصر الرئيسي بذلك.
6. بهذه الطريقة، يتمّ التنقّل في الشجرة بأكملها من الأعلى إلى الأسفل. في النهاية، تحدّد كل العقد أحجامها، وتنتهي خطوة القياس.

للحصول على مثال مفصّل، يمكنك الاطّلاع على فيديو قيود وترتيب المُعدِّلات.

المُعدِّلات التي تؤثّر في القيود

لقد تعرّفت في القسم السابق على أنّ بعض المُعدِّلات يمكن أن تؤثّر في حجم القيود. توضّح الأقسام التالية عوامل تعديل محدّدة تؤثّر في القيود.

مُعدِّل size

يحدِّد المُعدِّل size الحجم المفضَّل للمحتوى.

على سبيل المثال، يجب عرض شجرة واجهة المستخدم التالية في حاوية 300dp بواسطة 200dp. تكون القيود محدودة، ما يسمح بعرض بين 100dp و 300dp، وارتفاع بين 100dp و200dp:

يُعدِّل المُعدِّل size القيود الواردة لمطابقة القيمة التي تم تمريرها إليه. في هذا المثال، القيمة هي 150dp:

إذا كان العرض والارتفاع أصغر من أصغر حدود القيود، أو أكبر من أكبر حدود القيود، يتطابق المُعدِّل مع القيود التي تم تمريرها قدر الإمكان مع الالتزام بالقيود التي تم تمريرها في:

يُرجى العِلم أنّ تسلسل عدّة عوامل تعديل size لا يؤدي إلى النتيجة المطلوبة. يحدّد المُعدِّل size الأول الحدّ الأدنى والحدّ الأقصى للقيود على قيمة ثابتة. حتى إذا كان تعديل المقاس الثاني يطلب مقاسًا أصغر أو أكبر، يجب أن يتم الالتزام بالحدود الدقيقة التي تم تمريرها، لكي لا تلغي هذه القيم:

مُعدِّل requiredSize

استخدِم المُعدِّل requiredSize بدلاً من size إذا كنت بحاجة إلى أن تلغي العقدة القيود الواردة. يستبدل المُعدِّل requiredSize القيود الواردة ويُرسِل الحجم الذي تحدّده كحدود دقيقة.

عند تمرير الحجم مرة أخرى إلى أعلى العرض التدرّجي، سيتم وضع العقدة الفرعية في وسط المساحة المتوفّرة:

مُعدِّلات width وheight

يُعدِّل المُعدِّل size عرض القيود وارتفاعها. باستخدام المُعدِّل width، يمكنك ضبط عرض ثابت ولكن ترك الارتفاع غير محدّد. وبالمثل، باستخدام المُعدِّل height، يمكنك ضبط ارتفاع ثابت، ولكن اترك العرض غير محدّد:

مُعدِّل sizeIn

تتيح لك أداة التعديل sizeIn ضبط قيود الحدّ الأدنى والحدّ الأقصى الدقيقين للعرض والارتفاع. استخدِم المُعدِّل sizeIn إذا كنت بحاجة إلى التحكّم بشكل دقيق في القيود.

أمثلة

يعرض هذا القسم ويوضّح النتائج من عدة مقتطفات رمزية باستخدام مُعدِّلات متسلسلة.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

ينتج المقتطف التالي النتيجة التالية:

• يغيّر المُعدِّل fillMaxSize القيود لضبط كل من الحد الأدنى للعرض والارتفاع على الحد الأقصى، أي 300dp للعرض و200dp للارتفاع.
• على الرغم من أنّ المُعدِّل size يريد استخدام حجم 50dp، لا يزال بحاجة إلى الالتزام بالحدّ الأدنى من القيود الواردة. وبالتالي، سيؤدي معدّل size أيضًا إلى عرض حدود القيود الدقيقة لـ 300 حسب 200، ما يؤدي إلى تجاهل القيمة المقدَّمة في معدّل size.
• يتّبع Image هذه الحدود ويُبلغ عن حجم 300 x ‏200، والذي يتم تمريره إلى أعلى الشجرة.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

ينتج المقتطف التالي النتيجة التالية:

• يُعدِّل المُعدِّل fillMaxSize القيود لضبط الحد الأدنى للعرض والارتفاع على الحد الأقصى، أي 300dp للعرض و200dp للارتفاع.
• يُعيد المُعدِّل wrapContentSize ضبط الحدّ الأدنى من القيود. وبالتالي، على الرغم من أنّ fillMaxSize أدّى إلى قيود ثابتة، فإنّ wrapContentSize يعيد ضبطه مجددًا إلى القيود ذات الحدود الدنيا والعليا. يمكن للعقدة التالية الآن أن تشغل المساحة بالكامل مجددًا أو أن تكون أصغر من المساحة بالكامل.
• يضبط المُعدِّل size القيود على الحدّ الأدنى والحدّ الأقصى لحدود 50.
• يتم تحويل القيمة Image إلى حجم 50 x ‏50، ويعيد المُعدِّل size توجيه ذلك.
• يحتوي المُعدِّل wrapContentSize على خاصيّة خاصة. تأخذ العنصر الأولي وتضعه في وسط الحدود الدنيا المتاحة التي تم تمريرها إليها. وبالتالي، يكون الحجم الذي يُرسِله إلى العناصر الرئيسية مساويًا لحدود الحد الأدنى التي تم تمريرها إليه.

من خلال دمج ثلاثة مُعدِّلات فقط، يمكنك تحديد حجم للعنصر القابل للتجميع و توسيطه في العنصر الرئيسي.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)
ConstraintsModifiersSnippets.kt

ينتج المقتطف التالي النتيجة التالية:

• لا يغيّر المُعدِّل clip القيود.
  • يخفض المُعدِّل padding الحدّ الأقصى للقيود.
  • يضبط المُعدِّل size جميع القيود على 100dp.
  • يتقيّد Image بهذه القيود ويُبلغ عن حجم 100 بقياس 100dp.
  • يضيف المُعدِّل padding 10dp إلى جميع الأحجام، ما يؤدي إلى زيادة العرض والارتفاع المُبلَّغ عنهما بمقدار 20dp.
  • الآن في مرحلة الرسم، يعمل المُعدِّل clip على لوحة 120 بقياس 120dp. وبالتالي، يتم إنشاء قناع دائرة بهذا الحجم.
  • بعد ذلك، يُدخل المُعدِّل padding المحتوى بمقدار 10dp في جميع الأحجام، ما يؤدي إلى خفض حجم اللوحة إلى 100 بمقدار 100dp.
  • يتم رسم الرمز Image في هذه اللوحة. يتم اقتصاص الصورة استنادًا إلى الدائرة الأصلية التي يبلغ قطرها 120dp، وبالتالي تكون النتيجة غير دائرية.