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

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

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

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

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

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

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

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

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

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

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

باختصار:

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

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

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

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

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