قائمة قابلة للتمرير

جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 1 من 33.

يكون ارتفاع Column مساويًا لارتفاع كل ما بداخلها. عندما يتجاوز هذا الارتفاع ارتفاع الشاشة، يُقتطع الجزء السفلي، ويرسم Flutter خطوطًا صفراء وسوداء في موضع تجاوزها.

تأخذ ListView العناصر نفسها children: التي تأخذها Column، لكنها قابلة للتمرير. اسحبها إلى الأعلى على الهاتف لتظهر بقية القائمة.

ListView(
  children: [
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

تشغل ListView المساحة المتاحة لها وتبدأ دائمًا من الأعلى، لذا لا تحتوي على mainAxisSize ولا على mainAxisAlignment.

التحدي

سهل

يعرض التطبيق 20 مدينة في Column، ومعظمها لا يتسع: ابحث عن الخطوط عند أسفل الهاتف. غيّر Column إلى ListView لتتمكن من التمرير إلى Wellington، آخر مدينة.

جرّب بنفسك

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final List<String> cities = [
      'Amsterdam',
      'Bangkok',
      'Cairo',
      'Dublin',
      'Edinburgh',
      'Florence',
      'Geneva',
      'Havana',
      'Istanbul',
      'Jakarta',
      'Kyoto',
      'Lima',
      'Madrid',
      'Nairobi',
      'Oslo',
      'Paris',
      'Quito',
      'Rome',
      'Seoul',
      'Wellington',
    ];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Cities')),
        body: Column(
          children: [
            for (String city in cities)
              Padding(
                padding: const EdgeInsets.all(16),
                child: Text(city, style: const TextStyle(fontSize: 24)),
              ),
          ],
        ),
      ),
    );
  }
}