通过滚动解决溢出

本课属于 Coddy Flutter 学习旅程的“适配不同屏幕的布局”单元。第 7 课，共 30 课。

如果 Column 的子项太多，屏幕放不下，内容就会从底部溢出。手机的高度有限，而且 Column 不会自行滚动。

用 SingleChildScrollView 包住它。这样，列可以按需要延伸，你可以拖动屏幕查看剩余内容：

SingleChildScrollView(
  child: Column(
    children: [
      // 可以添加任意数量的子组件
    ],
  ),
)

对于比屏幕更长的页面，例如设置页面、表单或文章，可以用这种方法解决。对于由许多同类项目组成的长列表，你已经了解的 ListView 也能完成相同的工作。

滚动视图要包住整个列。如果给每个子项单独套上滚动视图，列的高度仍会和之前一样。

挑战

简单

这一周的内容从底部溢出。让页面可以滚动，这样你就能看到 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))),
                ),
            ],
          ),
        ),
      ),
    );
  }
}