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

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

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

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

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

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

تؤدي إضافة أكثر من مفتاح تعديل واحد إلى عنصر قابل للتجميع إلى إنشاء سلسلة من مفاتيح التعديل. عند ربط عدّة عناصر تعديل، تلفّ كلّ عقدة تعديل بقية السلسلة وعقدة التنسيق ضمنها. على سبيل المثال، عند ربط عنصر 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 في 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، وبالتالي تكون النتيجة غير دائرية.