SafeArea在颤振中的应用

Question

我正试着理解SafeArea小部件。

SafeArea代码添加到github中的颤振库应用程序这里中，显示top:false和bottom:false无处不在。为何在这些情况下，这些都是假的呢？

​

Answer 1

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

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

​

​

如果将Scaffold包装在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,
)

补充码

如果您想更多地使用这个，下面是main.dart

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.'),
      ),
    );
  }
}

Answer 2

当您将小部件A包装到安全区域时，您是在向框架请求“请让我的小部件A远离设备的UI导航和刻痕”。

参数‘上，下，右和左’是用来告诉框架，如果你想让他，以避免设备的入侵，特别是从那一边。

例如:如果您将小部件A放在屏幕顶部的安全区域中，并将" top “参数设置为false，则它将被iPhone的X和Pixel 3的凹槽裁剪。

Answer 3

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(
    ),
  ),
);  }}