flutter里的SafeArea有什么用

 移动设备顶部一般会有状态栏或者特殊的刘海，在设计 ui 时需要防止内容被盖住。flutter 提供了SafeArea解决这类问题。

1. 内容被覆盖

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: "test",
    home: const Text("来试试显示的问题，部分文字会被状态栏盖住"),
  ));
}

2. 使用SafeArea

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: "test",
    home: const SafeArea(child: const Text("来试试显示的问题，部分文字会被状态栏盖住")),
  ));
}

 第一个例子没有使用SafeArea，文字被状态栏盖住了，第二个就没有这个问题。

---

1. SafeArea class

2. Flutter - Using SafeArea Widget Examples

署名-非商业性使用-禁止演绎 4.0 国际