في Compose، يمكنك ربط عدة مفاتيح تعديل معًا لتغيير مظهر عنصر قابل للإنشاء وأسلوبه. يمكن أن تؤثر سلاسل التعديل هذه في القيود التي يتم تمريرها إلى العناصر القابلة للإنشاء، والتي تحدد حدود العرض والارتفاع.
توضّح هذه الصفحة كيفية تأثير المعدِّلات المتسلسلة في القيود، وبالتالي على قياس المواد القابلة للإنشاء وموضعها.
المعدِّلات في شجرة واجهة المستخدم
لفهم كيفية تأثير المُعدِّلات في بعضها، من المفيد تصوُّر كيفية ظهورها في شجرة واجهة المستخدم، والتي يتم إنشاؤها خلال مرحلة الإنشاء. لمزيد من المعلومات، راجِع القسم مقطوعة موسيقية.
في شجرة واجهة المستخدم، يمكنك عرض مفاتيح التعديل كعُقد برنامج تضمين لعُقد التنسيق:
تؤدي إضافة أكثر من مفتاح تعديل واحد إلى عنصر قابل للإنشاء إلى إنشاء سلسلة من مفاتيح التعديل. عند إجراء سلسلة مفاتيح تعديل متعددة، تعمل كل عقدة تعديل على التفاف باقي السلسلة وعقدة التنسيق داخل. على سبيل المثال، عند ربط سلسلة مفاتيح clip
وأداة تعديل size
، تتضمن عقدة التعديل clip
عقدة التعديل size
،
والتي تؤدي بعد ذلك إلى التفاف عقدة التنسيق Image
.
في مرحلة التنسيق، تظل الخوارزمية التي توجِّه المستخدِمين كما هي، ولكن تتم أيضًا زيارة كل عقدة تعديل. بهذه الطريقة، يمكن للمُعَدِّل تغيير متطلبات الحجم وموضع المعدِّل أو عقدة التخطيط التي يتم لفها.
كما هو موضّح في الشكل 2، إنّ تنفيذ العنصرَين Image
وText
القابل للإنشاء نفسه يتألف من سلسلة من مفاتيح التعديل التي تضم عقدة تنسيق واحدة. تنفيذات Row
وColumn
هي ببساطة عُقد تنسيق تصف كيفية تخطيط العناصر الثانوية.
في ما يلي ملخّص:
- تؤدي المعدِّلات إلى التفاف عقدة تنسيق أو معدِّل واحد.
- يمكن أن تضع عُقد التصميم عدة عُقد فرعية.
توضّح الأقسام التالية كيفية استخدام هذا النموذج العقلي لاستنتاج تسلسل أدوات التعديل وكيفية تأثيره في حجم العناصر القابلة للإنشاء.
القيود في مرحلة التخطيط
تتبع مرحلة التخطيط خوارزمية من ثلاث خطوات للعثور على عرض كل عقدة تخطيط وارتفاعها وإحداثها س، ص:
- قياس العناصر الثانوية: تقيس العقدة عناصرها الثانوية، إن وجدت.
- تحديد الحجم الخاص: استنادًا إلى هذه القياسات، يتم تحديد حجم العُقدة حسب حجمها.
- إضافة العناصر الثانوية: يتم وضع كل عقدة ثانوية بالنسبة إلى موضع كل عقدة.
يساعد Constraints
في العثور على المقاسات المناسبة للعُقد خلال أول خطوتَين من الخوارزمية. تحدد القيود الحد الأدنى والأقصى لعرض
العقدة وارتفاعها. عندما تحدّد العقدة حجمها، ينبغي أن يكون حجمها
الذي تم قياسه ضمن نطاق الحجم هذا.
أنواع القيود
يمكن أن يكون القيد واحدًا مما يلي:
- محصورة: الحد الأقصى والحد الأدنى للعرض والارتفاع للعقدة.
- غير محدودة: لم يتم حصر العقدة بأي حجم. يتم تعيين الحد الأقصى للعرض والارتفاع على ما لا نهاية.
- تامة: يُطلب من العقدة اتّباع متطلب الحجم الدقيق. يتم تعيين الحدود الدنيا والقصوى على نفس القيمة.
- مجموعة: تتبع العقدة مجموعة من أنواع القيود المذكورة أعلاه. على سبيل المثال، يمكن أن يربط القيد العرض مع السماح بالحد الأقصى للارتفاع غير المحدود، أو يضبط عرضًا دقيقًا ولكن يوفر ارتفاعًا محددًا.
يصف القسم التالي كيفية تمرير هذه القيود من الأصل إلى التابع.
كيفية تمرير القيود من الأصل إلى الثانوي
خلال الخطوة الأولى من الخوارزمية الموضّحة في القيود في مرحلة التنسيق، يتم تمرير القيود من العنصر الرئيسي إلى التطبيق الفرعي في شجرة واجهة المستخدم.
عندما تقيس العقدة الرئيسية عناصرها الثانوية، فإنها توفر هذه القيود لكل فرع للسماح له بمعرفة الحجم المسموح به أو الصغير. بعد ذلك، عندما يقرر حجمها الخاص، فإنه يلتزم أيضًا بالقيود التي مررها والديه.
على مستوى عالٍ، تعمل الخوارزمية بالطريقة التالية:
- لتحديد الحجم الذي تريد أن تشغله بالفعل، تقيس العقدة الجذر في شجرة واجهة المستخدم عناصرها الثانوية وتعيد توجيه نفس القيود إلى عنصرها الثانوي الأول.
- إذا كان العنصر الثانوي مُعدِّلاً لا يؤثر في القياس، ستتم إعادة توجيه القيود إلى أداة التعديل التالية. يتم تمرير القيود أسفل سلسلة مفاتيح التعديل كما هي، ما لم يتم الوصول إلى معدِّل يؤثر في القياس. يتم بعد ذلك تغيير حجم القيود وفقًا لذلك.
- عند الوصول إلى عقدة ليس لها أي عناصر فرعية (يشار إليها باسم "عقدة الورقة")، تقرر حجمها بناءً على القيود التي تم تمريرها، وتعيد هذا الحجم الذي تم حله إلى الأصل.
- يعدّل الوالد قيوده بناءً على قياسات هذا الطفل، ويستدعي طفله التالي بهذه القيود المعدَّلة.
- بمجرد قياس كل العناصر الثانوية للرئيس الرئيسي، تقرر العقدة الرئيسية حجمها الخاص وترسل ذلك إلى الأصل.
- بهذه الطريقة، تتجاوز الشجرة بأكملها العمق أولاً. في النهاية، حددت جميع العقد أحجامها، وتم الانتهاء من خطوة القياس.
للاطّلاع على مثال مفصّل، يمكنك مشاهدة فيديو القيود وترتيب مفاتيح التعديل.
المعدِّلات التي تؤثر في القيود
لقد تعلمت في القسم السابق أن بعض مفاتيح التعديل يمكن أن تؤثر على حجم القيد. تصف الأقسام التالية مفاتيح تعديل محددة تؤثر في القيود.
أداة تعديل 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) )
يُنتج هذا المقتطف الإخراج التالي:
- يغيّر مفتاح التعديل
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
، وبالتالي يكون الناتج نتيجة غير مستديرة.
- يعمل مفتاح التعديل