Jetpack Compose Column: لماذا لا يعمل التوسيط وكيفية إصلاحه

لماذا لا تستجيب Column؟ لعنة التوسيط في Jetpack Compose

هل جلست يومًا في الليل مع فنجان قهوة، تكتب كودًا بلغة Kotlin لـ Jetpack Compose وفجأة لاحظت أن Column الخاصة بك ترفض بعناد توسيط المحتوى؟ تضيف Modifier.align(Alignment.CenterHorizontally) — ولكن النص لا يزال ملتصقًا بالحافة اليسرى. هل هذا مألوف؟

هذه المشكلة هي ضجة حقيقية على Stack Overflow. آلاف المطورين (وأنا منهم) ضربوا رؤوسهم بالشاشة محاولين فهم أين اختفى "gravity center". في هذه المقالة، سنستعرض أهم الأخطاء التي تحول Column الخاصة بك إلى قائمة غير قابلة للتحكم، ونتعلم كيفية تجنبها. استعدوا: سيكون هناك الكثير من الكود، أمثلة حية، ولا ماء زائد.

الخطأ رقم 1: الخلط بين Column و Row

أول وأكثر فخ شائع هو نقل العادات من Android XML الكلاسيكي. هناك، كان لدى LinearLayout الخاصية gravity="center". في Compose، الأمر مختلف تمامًا.

الفرق الرئيسي: Column ترتب العناصر عموديًا. لذلك، "التوسيط الأفقي" ليس خاصية لـ Column نفسها، بل هو سلوك لعناصرها الفرعية. إذا كتبت:

Column(\n    modifier = Modifier.fillMaxSize(),\n    horizontalAlignment = Alignment.CenterHorizontally\n) {\n    Text("مرحبًا بالعالم!")\n}

هنا يعمل horizontalAlignment، ولكن فقط إذا كان Text نفسه غير مقيد بالعرض. أما إذا كان لديك Modifier.fillMaxWidth() على العنصر الفرعي — فسينهار التوسيط. لماذا؟ لأن العنصر يتمدد ليشغل العرض بالكامل، ولا يتبقى شيء لتوسيطه داخله.

الخطأ رقم 2: استخدام Modifier.align() بدلاً من horizontalAlignment

هذا كود فخ كلاسيكي يتداول على Stack Overflow:

Column(\n    modifier = Modifier.fillMaxSize()\n) {\n    Text(\n        text = "يجب أن أكون في المنتصف",\n        modifier = Modifier.align(Alignment.CenterHorizontally)\n    )\n}

للوهلة الأولى — يبدو منطقيًا. لكن هذا لن يعمل إذا لم يتم تعيين horizontalAlignment لـ Column. السبب هو أن Modifier.align() هو معدل خاص بـ Box و ColumnScope. إنه متاح فقط داخل Column، ولكنه يعمل بالتزامن مع horizontalAlignment. إذا لم يتم تحديد الأخير، يتم تجاهل align ببساطة.

كيفية الإصلاح:

Column(\n    modifier = Modifier.fillMaxSize(),\n    horizontalAlignment = Alignment.CenterHorizontally  // إلزامي!\n) {\n    Text(\n        text = "الآن أنا في المنتصف",\n        modifier = Modifier.align(Alignment.CenterHorizontally) // اختياري\n    )\n}

الخطأ رقم 3: نسيان Arrangement للتوسيط الرأسي

غالبًا ما يرغب المطورون في توسيط محتوى Column رأسيًا (على المحور Y). هنا يأتي دور verticalArrangement:

Column(\n    modifier = Modifier.fillMaxSize(),\n    verticalArrangement = Arrangement.Center,\n    horizontalAlignment = Alignment.CenterHorizontally\n) {\n    Text("مركز الكون")\n    Button(onClick = { }) { Text("زر") }\n}

لكن هناك فارق بسيط: Arrangement.Center سيعمل فقط إذا كانت Column تشغل الارتفاع الكامل للشاشة (Modifier.fillMaxSize() أو Modifier.height(IntrinsicSize.Min)). إذا كان ارتفاع Column يساوي مجموع ارتفاعات العناصر الفرعية — فلن يكون هناك مجال للتوسيط.

الخطأ رقم 4: IntrinsicSize والسلوك غير المتوقع

أحيانًا تضيف Modifier.height(IntrinsicSize.Min) لجعل Column تنكمش حسب المحتوى. وهنا ينهار التوسيط الرأسي:

Column(\n    modifier = Modifier\n        .fillMaxWidth()\n        .height(IntrinsicSize.Min),\n    verticalArrangement = Arrangement.Center\n) {\n    Text("نص 1")\n    Text("نص 2")\n}

المشكلة:

المدونات

نشر Swift على Kubernetes: دليل أساسي للمطورين

البرمجة غير المتزامنة في PHP: دليل شامل للمبتدئين

القواميس في Python: إنشاء والتعامل مع المفاتيح

توصيات الكتب

الخوارزميات وهياكل البيانات بلغة Rust

Rust والخدمات المصغرة: بناء أنظمة موزعة متسامحة مع الأخطاء

أداء تطبيقات Swift (iOS/macOS)

أنماط تصميم تطبيقات المؤسسات

اقرأ أيضًا

الشركات الناشئة بلغة Kotlin: كيف تغير لغة JetBrains الأعمال كيفية إظهار أخطاء PHP: دليل شامل للمبتدئين التزامن وتعدد الخيوط في PHP: من الألف إلى الياء كيفية معرفة إصدار Swift: دليل تحسين الأداء تقسيم السلسلة النصية إلى أسطر في .NET: 5 أخطاء قاتلة وحلولها