Menu
CoddyTech
flag Ar iconالعربيةdown icon

إصلاح التجاوز: التمرير

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 7 من 30.

إذا احتوى Column على عناصر فرعية أكثر مما تتسع له الشاشة، فسيحدث تجاوز عند الأسفل. للهاتف ارتفاع محدود، ولا تتمرر Column من تلقاء نفسها أبدًا.

أحِطها بـ SingleChildScrollView. عندئذٍ يمكن أن يصل ارتفاع العمود إلى ما يحتاج إليه، ويمكنك سحب الشاشة لرؤية الباقي:

SingleChildScrollView(
  child: Column(
    children: [
      // أي عدد تريده من العناصر الفرعية
    ],
  ),
)

هذا هو الحل لصفحة أطول من الشاشة: صفحة إعدادات أو نموذج أو مقالة. أما بالنسبة إلى قائمة طويلة من عناصر من النوع نفسه، فإن ListView التي تعرفها بالفعل تؤدي المهمة نفسها.

تلتف طريقة العرض القابلة للتمرير حول العمود بأكمله. أما إحاطة كل عنصر فرعي بطريقة عرض قابلة للتمرير خاصة به، فتُبقي العمود بالارتفاع نفسه كما كان من قبل.

challenge icon

التحدي

سهل

يتجاوز الأسبوع الحافة السفلية. اجعل الصفحة قابلة للتمرير حتى تتمكن من الوصول إلى Sunday.

جرّب بنفسك

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('This Week')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              for (final day in days)
                Container(
                  height: 120,
                  margin: const EdgeInsets.only(bottom: 12),
                  decoration: BoxDecoration(
                    color: Colors.lightBlue.shade100,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Center(child: Text(day, style: const TextStyle(fontSize: 20))),
                ),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس تصميم يتكيف مع الشاشة

تدرّب بنفسك: مترجم Flutter عبر الإنترنت