SafeArea 与刘海屏

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

大多数手机的屏幕并不是一个完整的矩形。时钟和摄像头刘海会遮住顶部，底部则有一条主屏幕横条。AppBar 知道这一点，会把标题下移，但没有它的页面会从最顶端开始，位于时钟下方。

SafeArea 会把它的子组件移出这些区域：

Scaffold(
  body: SafeArea(
    child: Column(
      children: [...],
    ),
  ),
)

它会询问手机每条边被遮挡了多少，然后添加相应的空白。在没有刘海的手机上，它不会添加任何空白，因此同一段代码适用于所有手机。

固定的 Padding 无法做到这一点：对于状态栏高 47 像素的手机，16 像素太少；对于没有状态栏的手机，又太多。

挑战

简单

在带刘海的手机上，Good morning 会被时钟遮住，按钮会落在主屏幕横条上。让整个页面避开这两处区域。

亲手试试

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.orange.shade50,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text('Good morning', style: TextStyle(fontSize: 32)),
            const Spacer(),
            ElevatedButton(
              onPressed: () {},
              child: const Text('Start workout'),
            ),
          ],
        ),
      ),
    );
  }
}