flutter - 在Flutter中使用SafeArea

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

在github的Flutter Gallery应用程序here中添加的SafeArea代码在各处都显示top:false和bottom:false。为什么在这些情况下需要将它们设置为假？

最佳答案

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

关于flutter - 在Flutter中使用SafeArea，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49227667/