可滚动的列表

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 1 课，共 33 课。

Column 的高度和其中所有内容的总高度一样。当内容超过屏幕高度时，底部会被截掉，Flutter 会在溢出的位置绘制黄黑相间的条纹。

ListView 接受与 Column 相同的 children:，但可以滚动。在手机上向上拖动它，列表的其余部分就会显示出来。

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

ListView 会填满分配给它的空间，并且始终从顶部开始，因此它没有 mainAxisSize，也没有 mainAxisAlignment。

挑战

简单

这个应用会在 Column 中列出 20 个城市，但大多数城市都显示不下：看看手机底部的条纹。把 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)),
              ),
          ],
        ),
      ),
    );
  }
}