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

تؤدي إضافة أكثر من معدِّل واحد إلى عنصر قابل للإنشاء إلى إنشاء سلسلة من المعدِّلات. عند ربط معدّلات متعددة، يلتف كل عقدة معدّل حول بقية السلسلة وعقدة التنسيق في الداخل. على سبيل المثال، عند ربط معدِّل clip
بمعدِّل size
، تلتف عقدة المعدِّل clip
حول عقدة المعدِّل size
، ثم تلتف حول عقدة التنسيق Image
.
في مرحلة التنسيق، تظل الخوارزمية التي تتنقّل في الشجرة كما هي، ولكن يتم أيضًا الانتقال إلى كل عقدة معدِّل. بهذه الطريقة، يمكن لأداة التعديل تغيير متطلبات الحجم وموضع أداة التعديل أو عقدة التنسيق التي تتضمّنها.
كما هو موضّح في الشكل 2، يتألف تنفيذ العنصرَين القابلَين للإنشاء Image
وText
من سلسلة من المعدِّلات التي تغلف عقدة تخطيط واحدة. إنّ عمليات تنفيذ Row
وColumn
هي ببساطة عقد تخطيط تصف كيفية ترتيب العناصر التابعة لها.

باختصار:
- تتضمّن المعدِّلات معدِّلاً واحدًا أو عقدة تخطيط واحدة.
- يمكن لعُقد التنسيق ترتيب عُقد ثانوية متعددة.
توضّح الأقسام التالية كيفية استخدام هذا النموذج الذهني للتعليل بشأن تسلسل المعدِّلات وتأثيره في حجم العناصر القابلة للإنشاء.
القيود في مرحلة التخطيط
تتّبع مرحلة التنسيق خوارزمية من ثلاث خطوات للعثور على عرض وارتفاع وإحداثيات x وy لكل عقدة تنسيق:
- قياس العناصر التابعة: تقيس العقدة العناصر التابعة لها، إن وُجدت.
- تحديد الحجم: استنادًا إلى هذه القياسات، تحدّد العقدة حجمها.
- وضع العناصر التابعة: يتم وضع كل عنصر تابع بالنسبة إلى موضع العنصر الرئيسي.
تساعد Constraints
في العثور على الأحجام المناسبة للعُقد خلال الخطوتَين الأوليَين من الخوارزمية. تحدّد القيود الحدود الدنيا والقصوى لعرض وارتفاع عقدة. عندما تحدّد العقدة حجمها، يجب أن يندرج حجمها المقاس ضمن نطاق الحجم هذا.
أنواع القيود
يمكن أن يكون القيد أحد ما يلي:
- محدود: يحتوي العقدة على حدّ أقصى وأدنى للعرض والارتفاع.

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

- مطابقة تامة: يُطلب من العقدة اتّباع متطلبات حجم محدَّد. يتم ضبط الحد الأدنى والأقصى على القيمة نفسها.

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

يوضّح القسم التالي كيفية نقل هذه القيود من عنصر رئيسي إلى عنصر فرعي.
كيفية نقل القيود من العنصر الرئيسي إلى العنصر الثانوي
خلال الخطوة الأولى من الخوارزمية الموضّحة في مرحلة القيود في التصميم، يتم نقل القيود من العنصر الأصل إلى العنصر الفرعي في شجرة واجهة المستخدم.
عندما تقيس عقدة أصلية حجم العُقد التابعة لها، فإنّها توفّر هذه القيود لكل عقدة تابعة لإعلامها بالحجم المسموح لها به. بعد ذلك، عندما يقرّر حجمه، يلتزم أيضًا بالقيود التي تم تمريرها من خلال العناصر الرئيسية.
بشكل عام، تعمل الخوارزمية على النحو التالي:
- لتحديد الحجم الذي تريد أن تشغله فعليًا، تقيس العقدة الجذرية في شجرة واجهة المستخدم العناصر التابعة لها وتُعيد توجيه القيود نفسها إلى العنصر التابع الأول.
- إذا كان العنصر التابع معدِّلاً لا يؤثر في القياس، يعيد توجيه القيود إلى المعدِّل التالي. يتم تمرير القيود إلى سلسلة المعدِّلات كما هي ما لم يتم الوصول إلى معدِّل يؤثر في القياس. بعد ذلك، يتم تغيير حجم القيود وفقًا لذلك.
- عند الوصول إلى عقدة ليس لديها أي عقد فرعية (يُشار إليها باسم "عقدة ورقة")، يتم تحديد حجمها استنادًا إلى القيود التي تم تمريرها، ويتم إرجاع هذا الحجم الذي تم تحديده إلى العقدة الرئيسية.
- يعدّل العنصر الأصلي قيوده استنادًا إلى قياسات هذا العنصر الفرعي، ويستدعي العنصر الفرعي التالي باستخدام هذه القيود المعدَّلة.
- بعد قياس حجم جميع العناصر الفرعية للعنصر الأصلي، يحدّد العنصر الأصلي حجمه ويُرسله إلى العنصر الأصلي الخاص به.
- بهذه الطريقة، يتم اجتياز الشجرة بأكملها أولاً بأول. في النهاية، تحدّد جميع العُقد أحجامها، وتكتمل خطوة القياس.
للاطّلاع على مثال مفصّل، شاهِد فيديو القيود وترتيب المعدِّلات.
المعدِّلات التي تؤثر في القيود
لقد تعرّفت في القسم السابق على أنّ بعض المعدِّلات يمكن أن تؤثر في حجم القيود. توضّح الأقسام التالية معدِّلات معيّنة تؤثّر في القيود.
معدِّل size
يحدّد المعدِّل size
الحجم المفضّل للمحتوى.
على سبيل المثال، يجب عرض شجرة واجهة المستخدم التالية في حاوية ذات 300dp
بمقدار 200dp
. القيود محدودة، ما يسمح بعرض يتراوح بين 100dp
و300dp
، وارتفاع يتراوح بين 100dp
و200dp
:

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

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

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

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

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

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

sizeIn
مع القيم minWidth
وmaxWidth
وminHeight
وmaxHeight
.أمثلة
يعرض هذا القسم ويشرح الناتج من عدة مقتطفات رمز تتضمّن معدّلات مرتبطة.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
ينتج عن هذا المقتطف الناتج التالي:
- تغيّر أداة التعديل
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) )
ينتج عن هذا المقتطف الناتج التالي:
- تعمل أداة التعديل
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) )
ينتج عن هذا المقتطف الناتج التالي:
- لا يغيّر المعدِّل
clip
القيود.- يؤدي المعدِّل
padding
إلى خفض الحدّ الأقصى للقيود. - يضبط المعدِّل
size
جميع القيود على100dp
. - تلتزم
Image
بهذه القيود وتُبلغ عن حجم100
في100dp
. - يضيف المعدِّل
padding
قيمة10dp
إلى جميع الأحجام، ما يؤدي إلى زيادة العرض والارتفاع المُبلَغ عنهما بمقدار20dp
. - أثناء الرسم، يعمل مفتاح التعديل
clip
على لوحة رسم بحجم120
×120dp
. لذا، يتم إنشاء قناع دائري بهذا الحجم. - يؤدي المعدِّل
padding
إلى إدراج المحتوى بمقدار10dp
على جميع المقاسات، ما يؤدي إلى خفض حجم لوحة العرض إلى100
بمقدار100dp
. - يتم رسم
Image
في لوحة العرض هذه. يتم قص الصورة استنادًا إلى الدائرة الأصلية الخاصة بـ120dp
، وبالتالي تكون النتيجة غير دائرية.
- يؤدي المعدِّل