在Flutter中使用SafeArea

Question

我正在尝试了解Flutter中的SafeArea小部件。

将SafeArea代码添加到github中的Flutter Gallery应用here，显示<b>和top:false。为什么在这些情况下需要将这些设置为假？

Answer 1

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

Answer 2

将小部件 A 包裹在安全区域时，您会向框架询问“请保持我的小部件 A 远离设备的UI导航和切口”

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

例如：如果将小部件A放在屏幕顶部的安全区域中，并将“ 顶部”自变量设置为 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(
    ),
  ),
);  }}

Answer 4

不使用 iPhone 12 pro max 中的 SafeArea

使用 SafeArea

使用 SafeArea 的代码片段

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