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

في 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 الأصلية، لذا يكون الناتج نتيجة غير دائرية.