SafeArea无法在Flutter中的持久底层工作

Question

我在屏幕上使用MaterialApp和Scaffold + SafeArea。一切正常，直到我尝试使用持久性BottomSheet。BottomSheet内容遵循SafeArea，并显示在系统控件下方，例如在iPhone X中。

我试图将BottomSheet内容包装在另一个SafeArea元素中，但没有帮助。

有没有办法获得与SafeArea相同的功能以在BottomSheet中工作？如果是，那怎么办？

Answer 1

只需将showModalBottomSheet的根 Widget设为 SafeArea Widget

showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[...

Answer 2

我通过添加容器并在里面填充以下内容解决了这个问题：MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top

Container(
      padding: EdgeInsets.only(
          top: MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top),
      child: MyOriginalWidgetForBottomSheet(),
)

不要从上下文中获取（如MediaQuery.of(context).padding.top），因为填充始终返回 0

Answer 3

我也遇到过这个问题。当我从改变代码showModalBottomSheet到_scaffoldKey.currentState.showBottomSheet我SafeArea停止工作。

您可以通过以下步骤解决：

1. 为您的脚手架创建密钥 GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
2. 将创建的密钥分配给您的 Scaffold key: _scaffoldKey,
3. 将底部填充设置为底部工作表 padding: EdgeInsets.only(bottom: MediaQuery.of(_scaffoldKey.currentState.context).viewPadding.bottom)

这是一个结果，我还在顶部、左侧和右侧添加了 15 个填充。

Answer 4

这已被修复 - 刚刚useSafeArea: true设置showModalBottomSheet。https://github.com/flutter/flutter/issues/39205

Answer 5

我尝试了这个简单的代码，它在 iPhone X 的 iOS 模拟器中按预期工作：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new SafeArea(
          child: new Scaffold(
            appBar: new AppBar(
              title: new Text('SafeArea demo'),
            ),
            body: new Center(
              child: new TapMe(),
            ),
          ),
        ));
  }
}

class TapMe extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new RaisedButton(
      child: new Text('Tap Me'),
      onPressed: () => Scaffold
          .of(context)
          .showBottomSheet((context) => new Text('I\'ve been tapped')),
    );
  }
}

您使用什么版本的 Flutter？