颤振安全区域问题

Question

我正在开发一个应用程序，我需要在其中使用安全区域以避免不必要的滑动。虽然我已经在自定义容器中实现了安全区域来呈现屏幕，但它在顶部留下了白边。

当我将这些参数添加到SafeArea() 小部件时，

top: false,
maintainBottomViewPadding: true,

空白消失。但是，应用栏的大小太大。这是最少的代码

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class DashboardActivity extends StatefulWidget {
  @override
  _DashboardActivityState createState() => _DashboardActivityState();
}

class _DashboardActivityState extends State<DashboardActivity> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      //top: false,
      //maintainBottomViewPadding: true,
      child: Scaffold(
        
        backgroundColor: Colors.white,
        resizeToAvoidBottomInset: true,
        appBar: CupertinoNavigationBar(
          backgroundColor: Colors.grey,
          leading: InkWell(
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
            ),
            onTap: () => Navigator.pop(context),
          ),
          middle: Text(
            "Dashboard",
          ),
        ),
        body: Text(
          'This is an example use of SafeArea',
        ),
      ),
    );
  }
}

这只发生在高显示器上，即纵横比超过 18:9 的显示器上。

谁能告诉我出了什么问题，我该如何解决？

Answer 1

SafeArea 基本上是相同的 Padding 小部件。不同之处在于它会在必要时为其子部件添加填充（例如，它会将子部件缩进足够多的距离以避免屏幕顶部的状态栏）。

它在较小的屏幕上工作的原因是SafeArea 没有在那里添加任何填充（就像padding: EdgeInsets.symmetric(vertical: 0) 这样的东西）

当您在较高的屏幕上将Scaffold 包裹在SafeArea 中时，它会计算必要的填充值并将其添加到Scaffold。

这就是你得到这个的原因：

SafeArea 的正确用例是在body: 内部使用它。

Flutter AppBar 和 CupertinoAppBar 小部件自行处理设备屏幕类型。