SafeArea在Flutter中的持久性底部表单中不工作

jljoyd4f  于 2023-02-25  发布在  Flutter
关注(0)|答案(8)|浏览(261)

我正在使用MaterialApp和Scaffold + SafeArea用于屏幕。在我尝试使用持久化BottomSheet之前,所有功能都运行良好。BottomSheet内容使用SafeArea并显示在系统控件下方,例如在iPhone X中。
我尝试将BottomSheet内容 Package 在另一个SafeArea元素中,但没有帮助。
有没有办法让SafeArea的功能和BottomSheet的功能一样?如果有,怎么做?

sq1bmfud

sq1bmfud1#

只需将 showModalBottomSheet 的根控件设置为安全区域控件

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

gojuced7

gojuced72#

我也面临过这个问题。当我把代码从showModalBottomSheet改成_scaffoldKey.currentState.showBottomSheet时,我的SafeArea停止了工作。
您可以通过以下步骤解决此问题:
1.为您的脚手架GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();创建密钥
1.将创建的密钥分配给您的Scaffold key: _scaffoldKey,
1.设置底部填充到你的底部工作表padding: EdgeInsets.only(bottom: MediaQuery.of(_scaffoldKey.currentState.context).viewPadding.bottom)
这里是一个结果,我还添加了15填充顶部,左侧和右侧。

zphenhs4

zphenhs43#

我解决了这个问题,添加容器和填充内: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

pkln4tw6

pkln4tw64#

在我的例子中,最高安全区域是问题所在,一个实用的解决方案是使用AppBar().preferredSize.height将填充设置为应用程序栏的高度

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

6rqinv9w5#

我试用了这段简单的代码,它在iOS模拟器和iPhone X中按预期工作:

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?

ttisahbt

ttisahbt6#

面对这个问题也是一流的。
使用dart:ui.window.viewPadding.top / ui.window.devicePixelRatio解决
工作原理:dart:ui.window.viewPadding是视图可以渲染到的显示矩形每一边的物理像素数,除以ui.window.devicePixelRatio我们应该得到逻辑像素。
总结代码是

showModalBottomSheet<bool>(
  context: context,
  builder: (BuildContext context) => Container(
    height: MediaQuery.of(context).size.height,
    padding: EdgeInsets.only(
     top: ui.window.viewPadding.top / ui.window.devicePixelRatio,
    ),
  ),
);
pkmbmrz7

pkmbmrz77#

恕我直言,最简单的解决方法是将InitialChildSize设置为0.9

DraggableScrollableSheet(
  initialChildSize: 0.9,
  minChildSize: 0.2,
  maxChildSize: 0.9,
  expand: false,
  builder: (BuildContext context, ScrollController scrollController) {
    
    }
)
vlf7wbxs

vlf7wbxs8#

此问题已修复-只需在showModalBottomSheet中设置useSafeArea: truehttps://github.com/flutter/flutter/issues/39205

相关问题