Flutter / دليل حلول تحريري

تشخيص قائمة غير محدودة وتجاوز التخطيط المرن

اعثر على أول قيد متناقض في صفحة بحث بدلا من تكديس ترقيعات تخطيط غير مرتبطة.

وقت القراءة التقريبي: 3 دقيقةتاريخ مراجعة المحتوى

قاعدة معرفة للقراءة فقط · بلا تعليقات عامة

تعرّف على الأعراض

تبلغ صفحة البحث عن مساحة عرض رأسية غير محدودة، أو يعرض صف مترجم طويل تجاوز RenderFlex. يظهر الاستثناء الأول أثناء التخطيط وقد تتبعه أخطاء رسم.

تحوي الصفحة عنوانا ومرشحات وقائمة نتائج. تبدو إضافة ارتفاع ثابت مفيدة لحجم واحد، ثم تفشل عندما تقلل لوحة المفاتيح أو النصوص الكبيرة المساحة المتاحة.

افهم الأسباب المحتملة

  • طُلب من عنصر التمرير تحديد ارتفاعه داخل أب رأسي غير محدود، أو طُلب من ابن مرن تقسيم مساحة متبقية لا نهائية.
  • وقد يعطي Row ابنا نصيا غير مرن عقد عرض غير مناسب. قد تأتي أعراض مرئية متشابهة من محاور مختلفة وتحتاج إلى إصلاحات مختلفة.

احفظ أول فشل ذي صلة

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

اختر عقد تمرير واحدا للصفحة

قرّر هل يبقى العنوان ثابتا وتتمرر النتائج أم تتمرر الصفحة كلها. في الحالة الأولى يمكن لجسم Scaffold محدود احتواء Column وقائمة داخل Expanded. ولصفحة مستمرة استخدم تركيب تمرير واحدا مناسبا، ربما مع slivers. إحاطة Column نفسها ذات Expanded بتمرير رأسي تنشئ عقد ارتفاع متناقضا. تغيّر shrinkWrap عمل تحديد الحجم وليست علاجا عاما بلا كلفة للتمرير المتداخل. اخترها فقط حين يبررها عقد محتوى صغير مقصود.

حدّد مساحة عرض النتائج صراحة

يوضح المقتطف عنوانا ثابتا وقائمة بارتفاع المساحة الباقية. يفترض أن الجسم المحيط يتلقى ارتفاعا محدودا. استخدم صفوفا محلية مصطنعة عند التحقق فلا يلزم خادم. وإذا احتوت الصفحة مرشحات ديناميكية فأدرج ارتفاعها الموسع في الاختبارات بدلا من فاصل ثابت. المهم أن يتلقى Expanded مساحة باقية محدودة من Column المحدودة. ولا يعني ذلك إحاطة كل قائمة متداخلة في كل سياق بـ Expanded.

dart مقتطف توضيحي من Dart أو Flutter؛ يتطلب بيئة SDK المبيّنة.
Widget resultBody() => Column(children: [
  const Text('Results'),
  Expanded(child: ListView.builder(
    itemCount: 30,
    itemBuilder: (_, index) => ListTile(title: Text('Result ${index + 1}')),
  )),
]);
الناتج المتوقع
A fixed heading sits above a bounded, scrollable result list.

يتطلب بيئة Material ذات ارتفاع جسم محدود. لم يُنفذ المقتطف بحزمة SDK.

أصلح عرض الصف كمشكلة مستقلة

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

تحقق من نجاح الإصلاح

كرر الحالة المصغرة ببيانات فارغة وثلاثين صفا وتسمية عربية طويلة ونص كبير ولوحة المفاتيح ظاهرة. تحقق من الوصول إلى الصف الأخير ومن غياب استثناء التخطيط الأول.

لا يثبت فحص JSON أو المصدر سلوك تخطيط الجهاز. نفذ الفحوص في بيئة Flutter متوافقة وسجّل الهدف والأبعاد المختبرة فعلا.

امنع تكرار المشكلة

  • وثّق العنصر الذي يملك التمرير والسلف الذي يوفر كل حد نهائي. أدرج النص الطويل والمكبّر في مراجعة التخطيط المعتادة واحفظ عينة تراجع صغيرة للبنية المصلحة.

المراجع الرسمية