في Compose، يمكنك ربط عدة مفاتيح تعديل معًا لتغيير شكل ذات طابع قابل للإنشاء. يمكن أن تؤثر سلاسل التعديل هذه في القيود التي تم ضبطها. إلى العناصر القابلة للإنشاء، والتي تحدد حدود العرض والارتفاع.
وتصف هذه الصفحة كيفية تأثير المعدِّلات المتسلسلة في القيود، وبالتالي قياس ووضع المواد القابلة للإنشاء.
المعدِّلات في شجرة واجهة المستخدم
لفهم كيفية تأثير المُعدِّلات في بعضها البعض، من المفيد تصور كيفية حيث تظهر في شجرة واجهة المستخدم، والتي يتم إنشاؤها أثناء مرحلة الإنشاء. بالنسبة من المعلومات، يمكنك مراجعة القسم مقطوعة موسيقية.
في شجرة واجهة المستخدم، يمكنك عرض مفاتيح التعديل كعُقد برنامج تضمين للتنسيق. العُقد:
![رمز العناصر القابلة للإنشاء والمعدِّلات، وتمثيلها المرئي كشجرة واجهة المستخدم.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/modifier-wrapping.png?authuser=7&hl=ar)
تؤدي إضافة أكثر من مفتاح تعديل واحد إلى عنصر قابل للإنشاء إلى إنشاء سلسلة من مفاتيح التعديل. فعندما
في سلسلة معدِّلات متعددة، تؤدي كل عقدة تعديل إلى التفاف بقية السلسلة
وعقدة التنسيق داخل. على سبيل المثال، عند إضافة سلسلة إلى clip
المعدِّل size
، تتضمن عقدة التعديل clip
عقدة التعديل size
،
والذي يلتف بعد ذلك عقدة التنسيق Image
.
في مرحلة التخطيط، تظل الخوارزمية التي توجِّه البيانات نحو الشجرة كما هي، ولكن تتم أيضًا زيارة كل عقدة تعديل. وبهذه الطريقة، يمكن للمحرر تغيير الحجم متطلبات وموضع المعدِّل أو عقدة التنسيق التي يتم لفّها.
كما هو موضّح في الشكل 2، إنّ تنفيذ العنصرَين Image
وText
القابلَين للإنشاء
نفسها تتكون من سلسلة من مفاتيح التعديل التي تضم عقدة تنسيق واحدة. تشير رسالة الأشكال البيانية
عمليات تنفيذ Row
وColumn
هي مجرد عُقد تنسيق تصف كيف
رسم أطفالهم.
![هيكل الشجرة من قبل، ولكن كل عقدة هي الآن مجرد تنسيق بسيط، وتضم الكثير من عُقد التعديل حولها.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/composables-modifiers.png?authuser=7&hl=ar)
في ما يلي ملخّص:
- تؤدي المعدِّلات إلى التفاف عقدة تنسيق أو معدِّل واحد.
- يمكن أن تضع عُقد التصميم عدة عُقد فرعية.
توضح الأقسام التالية كيفية استخدام هذا النموذج العقلي لاستنتاج تسلسل مفاتيح التعديل وكيفية تأثيره في حجم العناصر القابلة للإنشاء.
القيود في مرحلة التخطيط
تتبع مرحلة التنسيق خوارزمية من ثلاث خطوات للعثور على كل تنسيق. عرض العقدة وارتفاعها وx، الإحداثي y:
- قياس العناصر الثانوية: تقيس العقدة عناصرها الثانوية، إن وجدت.
- تحديد الحجم الخاص: استنادًا إلى هذه القياسات، يتم تحديد العقدة من تلقاء نفسها. الحجم.
- العناصر الثانوية حول الأماكن: يتم وضع كل عقدة ثانوية بالنسبة إلى عقدة أخرى خاصة بها الموقع.
يساعد Constraints
في العثور على المقاسات المناسبة للعُقد خلال أول اثنتين.
الخطوات في الخوارزمية. تحدد القيود الحد الأدنى والأقصى
عرض وارتفاع العقدة. عندما تحدّد العقدة حجمها، يتم قياسها
ضمن نطاق الحجم هذا.
أنواع القيود
يمكن أن يكون القيد واحدًا مما يلي:
- محصورة: الحد الأقصى والحد الأدنى للعرض والارتفاع للعقدة.
![قيود مقيَّدة بأحجام مختلفة داخل الحاوية.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/bounded-constraints.png?authuser=7&hl=ar)
- غير محدودة: لم يتم حصر العقدة بأي حجم. الحد الأقصى للعرض يتم تعيين حدود الارتفاع على اللانهاية.
![قيود غير محدودة تم ضبط العرض والارتفاع فيها على ما لا نهاية. تمتد القيود إلى ما بعد الحاوية.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/unbounded-constraints.png?authuser=7&hl=ar)
- تامة: يُطلب من العقدة اتّباع متطلب الحجم الدقيق. الحد الأدنى ويتم تعيين الحدود القصوى على نفس القيمة.
![القيود الدقيقة التي تتوافق مع متطلبات الحجم الدقيقة داخل الحاوية.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/exact-constraints.png?authuser=7&hl=ar)
- مجموعة: تتبع العقدة مجموعة من أنواع القيود المذكورة أعلاه. على سبيل المثال، يمكن أن يربط القيد العرض مع السماح ارتفاع الحد الأقصى غير المحدد، أو تعيين عرض دقيق ولكن مع توفير ارتفاع محدد.
![حاويتان تعرضان مجموعات من القيود المفروضة وغير المحدودة وكذلك الحدود والارتفاعات الدقيقة.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/combination-constraints.png?authuser=7&hl=ar)
يصف القسم التالي كيفية تمرير هذه القيود من الأصل إلى طفل
كيفية تمرير القيود من الأصل إلى الثانوي
خلال الخطوة الأولى من الخوارزمية الموضَّحة في قسم القيود في التنسيق المرحلة، يتم تمرير القيود من الأصل إلى الثانوي في شجرة واجهة المستخدم.
عندما تقيس العقدة الرئيسية عناصرها الثانوية، فإنها توفر هذه القيود لكل منها طفلاً يُعلمه بمدى كبر أو صغر حجمه. ثم، عندما وتقرر حجمها الخاص، فإنها تلتزم أيضًا بالقيود التي تم تمريرها من قبل والديه.
على مستوى عالٍ، تعمل الخوارزمية بالطريقة التالية:
- لتحديد الحجم الذي تريد أن تشغله، العقدة الأساسية في شجرة واجهة المستخدم ويقيس عناصره ويعيد توجيه نفس القيود إلى طفله الأول.
- إذا كان العنصر الثانوي مُعدِّلاً لا يؤثر في القياس، تتم إعادة توجيه القيود على المُعدِّل التالي. يتم تمرير القيود أسفل المعدِّل كما هي، ما لم يتم الوصول إلى مُعدِّل يؤثر في القياس. تشير رسالة الأشكال البيانية يتم تغيير حجم القيود وفقًا لذلك.
- عند الوصول إلى أي عقدة لا تحتوي على أي عناصر فرعية (يشار إليها باسم "ورقة الشجر" العقدة"، يقرر حجمها بناءً على القيود التي تم تمريرها، هذا الحجم الذي تم حله إلى الأصل.
- يتكيّف أحد الوالدين مع قيوده بناءً على قياسات هذا الطفل يستدعي طفله التالي بهذه القيود المعدلة.
- فبمجرد قياس جميع العناصر الثانوية للرئيس الرئيسي، تقرر العقدة الرئيسية بحجمه وإبلاغه بذلك إلى الوالدين.
- بهذه الطريقة، تتجاوز الشجرة بأكملها العمق أولاً. في النهاية، قد قد حددت أحجامها، وبذلك تكتمل خطوة القياس.
للحصول على مثال أكثر تفصيلاً، يمكنك الاطّلاع على القيود وترتيب مفاتيح التعديل. الفيديو القادم.
المعدِّلات التي تؤثر في القيود
لقد تعلمت في القسم السابق أن بعض مفاتيح التعديل يمكن أن تؤثر على القيد الحجم. تصف الأقسام التالية مفاتيح تعديل محددة تؤثر في القيود.
أداة تعديل size
يحدّد معدّل size
الحجم المفضّل للمحتوى.
على سبيل المثال، يجب عرض شجرة واجهة المستخدم التالية في حاوية 300dp
بواسطة 200dp
تم فرض قيود على القيود، ما يسمح بعرض قيم بين 100dp
و
300dp
، والارتفاعات بين 100dp
و200dp
:
![جزء من شجرة واجهة مستخدم مع معدِّل الحجم يلتف عقدة تنسيق،
تمثيل القيود المقيَّدة التي تم تعيينها بواسطة معدِّل الحجم في الحاوية.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier.png?authuser=7&hl=ar)
يعمل مفتاح التعديل size
على تعديل القيود الواردة لتطابق القيمة التي تم تمريرها إليه.
في هذا المثال، القيمة هي 150dp
:
![مثل الشكل 7، باستثناء مع معدِّل الحجم تعديل القيود الواردة لمطابقة القيمة التي تم تمريرها إليه.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-2.png?authuser=7&hl=ar)
size
على تعديل القيود على 150dp
.إذا كان العرض والارتفاع أصغر من الحد الأدنى الأصغر حجمًا، أكبر من أكبر قيد مرتبط، يتطابق مفتاح التعديل مع القيمة التي تم تمريرها إلى أقرب ما يمكن مع الاستمرار في الالتزام بالقيود التي تم تمريرها في:
![شجرتا واجهة مستخدم والتمثيلات المقابلة لها في الحاويات. في الطريقة الأولى،
تقبل أداة تعديل الحجم قيود التزايد؛ وفي الثانية، تتكيّف أداة تعديل الحجم مع
قيود كبيرة جدًا قدر الإمكان، مما يؤدي إلى وجود قيود تملأ الحاوية.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-3.png?authuser=7&hl=ar)
size
الذي يلتزم بالقيد الذي تم تمريره بدرجة أكبر
قدر الإمكانيُرجى العلم أنّ تسلسل عدة مفاتيح تعديل size
لا يعمل. أوّل size
يضبط مفتاح التعديل كلاً من الحد الأدنى والحد الأقصى على قيمة ثابتة. حتى إذا
يطلب معدِّل الحجم الثاني حجمًا أصغر أو أكبر، فإنه لا يزال بحاجة إلى
تلتزم بالحدود الدقيقة التي تم تمريرها، لذلك لن تتجاوز تلك القيم:
![سلسلة من معدِّلي حجم في شجرة واجهة المستخدم وتمثيلها في حاوية،
وهي نتيجة القيمة الأولى التي تم تمريرها وليس القيمة الثانية.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-4.png?authuser=7&hl=ar)
size
تمّ تمرير القيمة الثانية من خلالها
في (50dp
) لا تتجاوز القيمة الأولى (100dp
).أداة تعديل requiredSize
استخدِم مفتاح التعديل requiredSize
بدلاً من size
إذا كنت بحاجة إلى
لإلغاء القيود الواردة. سيحل المعدِّل requiredSize
محل
القيود الواردة وتمرير الحجم الذي تحدده كحدود دقيقة.
عندما يتم تمرير الحجم احتياطيًا في الشجرة، سيتم توسيط العقدة الثانوية في المساحة المتوفرة:
![يتم ربط مفتاح التعديل بالحجم والحجم المطلوب بالتسلسل في شجرة واجهة المستخدم،
التمثيل في الحاوية. تؤدي قيود مفتاح التعديل المطلوبة المقاس إلى إلغاء معدِّل الحجم
القيود.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/requiredsize-modifier.png?authuser=7&hl=ar)
requiredSize
الذي يلغي القيود الواردة من
أداة التعديل size
المعدِّلات width
وheight
يعدِّل مفتاح التعديل size
كلاً من عرض القيود وارتفاعها. مع
مفتاح التعديل width
، يمكنك ضبط عرض ثابت مع ترك الارتفاع بدون تحديد.
وبالمثل، باستخدام مفتاح التعديل height
، يمكنك ضبط ارتفاع ثابت، ولكن مع ترك
العرض غير محدَّد:
![شجرتان لواجهة المستخدم، إحداهما تتضمّن معدِّل العرض وتمثيل الحاوية والأخرى
مع معدِّل الارتفاع وتمثيله.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/width-height-modifier.png?authuser=7&hl=ar)
width
ومفتاح التعديل height
.
والطول على التواليأداة تعديل sizeIn
يتيح لك مفتاح التعديل sizeIn
ضبط الحدّ الأدنى والأقصى للقيود.
للعرض والارتفاع. استخدِم مفتاح التعديل sizeIn
إذا كنت بحاجة إلى تحكُّم أكثر دقة.
تجاوز القيود.
![شجرة واجهة مستخدم بها معدِّل sizeIn مع تعيين الحد الأدنى والحد الأقصى للعرض والارتفاع،
وتمثيلها داخل الحاوية.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/sizein-modifier.png?authuser=7&hl=ar)
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
، ولذلك يكون الناتج نتيجة غير مستديرة.
- يعمل مفتاح التعديل