Danh sách có thể cuộn

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 1 trên 33.

Column cao bằng tổng chiều cao của mọi thứ bên trong nó. Khi chiều cao đó vượt quá màn hình, phần dưới sẽ bị cắt và Flutter vẽ các sọc vàng đen ở chỗ nội dung tràn ra.

ListView nhận cùng children: như Column, nhưng có thể cuộn. Kéo lên trên điện thoại để xem phần còn lại của danh sách.

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

ListView lấp đầy không gian được cấp và luôn bắt đầu từ trên cùng, vì vậy nó không có mainAxisSize hay mainAxisAlignment.

Thử thách

Dễ

Ứng dụng liệt kê 20 thành phố trong một Column, nhưng hầu hết không vừa màn hình: hãy tìm các sọc ở cuối điện thoại. Đổi Column thành ListView để bạn có thể cuộn xuống đến Wellington, thành phố cuối cùng.

Tự làm thử

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)),
              ),
          ],
        ),
      ),
    );
  }
}