小开

当你将一个小部件 A封装在一个安全的区域时，你会要求框架“请让我的小部件 A远离设备的 UI 导航和切口”。

参数“顶部，底部，右边和左边”用来告诉框架，如果你想让他避免设备的侵入从那边特别。

例如: 如果你把你的小部件 A 放在屏幕顶部的一个安全区域，并将“ 头儿”参数设置为假的，它将被 iPhone 的 X 和像素3的切口裁剪掉。

小开

最佳答案

SafeArea基本上是一个美化的 Padding小部件。如果你用 SafeArea包装另一个小部件，它会添加任何必要的填充，以防止你的小部件被系统状态栏、切口、孔、圆角和其他制造商的“创造性”特性阻塞。

如果你使用带有 AppBar 的脚手架，在屏幕顶部会计算出适当的间距，而不需要将脚手架包裹在 SafeArea 中，状态栏的背景会受到 AppBar 颜色的影响(本例中为红色)。

如果将脚手架包装在 SafeArea 中，则状态栏区域将具有黑色背景，而不会受到 AppBar 的影响。

下面是一个没有设置 SafeArea的例子:

Align(
alignment: Alignment.topLeft,  // and bottomLeft
child: Text('My Widget: ...'),
)

同样，这个小部件包装在一个 SafeArea 小部件中:

Align(
alignment: Alignment.topLeft,  // and bottomLeft
child: SafeArea(
child: Text('My Widget: ...'),
),
)

你可以为不受切口影响的边缘设置最小填充，比如:

SafeArea(
minimum: const EdgeInsets.all(16.0),
child: Text('My Widget: ...'),
)

您也可以关闭任何一面的安全区域插图:

SafeArea(
left: false,
top: false,
right: false,
bottom: false,
child: Text('My Widget: ...'),
)

将它们全部设置为 false 与不使用 SafeArea 相同。所有方面的默认值都是 true。大多数情况下，您不需要使用这些设置，但是我可以想象一种情况，您有一个可以填满整个屏幕的小部件。你希望顶部不被任何东西挡住，但你不在乎底部。在这种情况下，您只需设置 bottom: false，而将其他边留给它们的默认 true值。

SafeArea(
bottom: false,
child: myWidgetThatFillsTheScreen,
)

补充代码

In case you want to play around more with this, here is 主，飞镖:

import 'package:flutter/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: BodyWidget(),
),
);
}
}


class BodyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topLeft,
child: SafeArea(
left: true,
top: true,
right: true,
bottom: true,
minimum: const EdgeInsets.all(16.0),
child: Text(
'My Widget: This is my widget. It has some content that I don\'t want '
'blocked by certain manufacturers who add notches, holes, and round corners.'),
),
);
}
}

小开

SafeArea 是一个小部件，它通过足够的填充设置其子代，以避免操作系统的入侵并改进用户界面。

import 'package:flutter/material.dart';


class SafeArea extends StatefulWidget {
@override
_SafeAreaState createState() => _SafeAreaState();
}


class _SafeAreaState extends State<SafeArea> {
@override
Widget build(BuildContext context) {
MediaQueryData mediaQueryData=MediaQuery.of(context);
double screenWidth = mediaQueryData.size.width;
var bottomPadding=mediaQueryData.padding.bottom;


return Padding(
padding: EdgeInsets.only(bottom: bottomPadding),
child: Scaffold(
body: new Container(
),
),
);  }}

小开

在 iPhone12中不使用安全区域

使用安全区域

使用 SafeArea 的代码段

SafeArea(
child: Text('Your Widget'),
)

在 Flutter 使用安全区

补充代码