在Flutter中使用SafeArea

Question

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

SafeArea代码加入到扑图库应用程序在这里在github上展示 top:false和bottom: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放在屏幕顶部的安全区域中并将" 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(
    ),
  ),
);  }}