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

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

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

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

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

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

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