在Flutter中使用SafeArea

Question 1

我试图了解Flutter中的SafeArea小部件。

SafeArea代码已添加到Flutter Gallery应用程序中，在github上的展示 top:false以及其他bottom:false地方。为什么在这些情况下需要将其设置为false？

Question 2

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

这是一个没有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.'),
      ),
    );
  }
}

Question 3

当将小部件A包装在安全区域时，您会询问框架“请让我的小部件A远离设备的UI导航和槽口”。

参数“ top，bottom，right和left”用于告知框架是否希望他避免从该侧入侵设备。

例如：如果将窗口小部件A放在屏幕顶部的安全区域中，并将“ top ”参数设置为false，它将被iPhone的X和Pixel 3的凹口裁切。

Question 4

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