Question

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

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

有没有办法让SafeArea能够在BottomSheet中使用相同的功能？如果是，那怎么样？

Answer 1

我也遇到了这个问题。当我将代码从showModalBottomSheet更改为_scaffoldKey.currentState.showBottomSheet时，我的SafeArea停止了工作。

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

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

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

Answer 2

我尝试了这个简单的代码，它可以在带有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？

Answer 3

只需将 showModalBottomSheet 的根窗口小部件设置为SafeArea窗口小部件

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

Answer 4

在我的情况下，顶部安全区域是问题所在，一个实用的解决方法是使用 AppBar().preferredSize.height 将内边距设置为应用栏的高度

Padding(
          padding: EdgeInsets.fromLTRB(0,AppBar().preferredSize.height,0,0),
          child: Text(
            'Your Order',
            style: headingMediumBlack,
          ),
        ),

SafeArea不在Flutter的持久底片中工作

4 个答案: