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

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

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

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

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

في شجرة واجهة المستخدم، يمكنك عرض مفاتيح التعديل كعُقد برنامج تضمين لعُقد التنسيق:

الشكل 1. معدِّلات التفاف عُقد التنسيق في شجرة واجهة المستخدم.

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

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

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

الشكل 2. بنية الشجرة نفسها كما في الشكل 1، ولكن مع عناصر قابلة للإنشاء في شجرة واجهة المستخدم مُتصوّرة كسلاسل من مفاتيح التعديل.

في ما يلي ملخّص:

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

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

القيود في مرحلة التخطيط

تتبع مرحلة التخطيط خوارزمية من ثلاث خطوات للعثور على عرض كل عقدة تخطيط وارتفاعها وإحداثها س، ص:

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

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

أنواع القيود

يمكن أن يكون القيد واحدًا مما يلي:

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

الشكل 3. قيود مقيّدة.

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

الشكل 4. قيود غير محدودة.

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

الشكل 5. القيود الدقيقة.

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

الشكل 6. مزيج من القيود المحدودة وغير المحدودة والعرض والارتفاعات الدقيقة

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

كيفية تمرير القيود من الأصل إلى الثانوي

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

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

على مستوى عالٍ، تعمل الخوارزمية بالطريقة التالية:

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

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

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

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

أداة تعديل size

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

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

الشكل 7. قيود مقيّدة في شجرة واجهة المستخدم وتمثيلها في حاوية.

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

الشكل 8. يعمل مفتاح التعديل size على تعديل القيود على 150dp.

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

الشكل 9. تمثّل هذه السمة مفتاح التعديل size الذي يلتزم بالقيد الذي تم تمريره بأكبر قدر ممكن.

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

الشكل 10. سلسلة من معدِّلي size، لا تؤدي فيهما القيمة الثانية (50dp) إلى إلغاء القيمة الأولى (100dp).

أداة تعديل requiredSize

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

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

الشكل 11. مفتاح التعديل requiredSize الذي يلغي القيود الواردة من مفتاح التعديل size.

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

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

الشكل 12. يعمل مفتاح التعديل width ومفتاح التعديل height على ضبط عرض وارتفاع ثابتَين على التوالي.

أداة تعديل sizeIn

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

الشكل 13. مفتاح التعديل sizeIn مع ضبط minWidth وmaxWidth وminHeight وmaxHeight.

أمثلة

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

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 في 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 بحلول 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، وبالتالي يكون الناتج نتيجة غير مستديرة.