我正在使用MaterialApp和Scaffold + SafeArea用于屏幕。在我尝试使用持久化BottomSheet之前,所有功能都运行良好。BottomSheet内容使用SafeArea并显示在系统控件下方,例如在iPhone X中。我尝试将BottomSheet内容 Package 在另一个SafeArea元素中,但没有帮助。有没有办法让SafeArea的功能和BottomSheet的功能一样?如果有,怎么做?
sq1bmfud1#
只需将 showModalBottomSheet 的根控件设置为安全区域控件
showModalBottomSheet<void>( context: context, builder: (BuildContext context) { return SafeArea( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[...
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填充顶部,左侧和右侧。
showModalBottomSheet
_scaffoldKey.currentState.showBottomSheet
SafeArea
GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
key: _scaffoldKey,
padding: EdgeInsets.only(bottom: MediaQuery.of(_scaffoldKey.currentState.context).viewPadding.bottom)
zphenhs43#
我解决了这个问题,添加容器和填充内:MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top
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
MediaQuery.of(context).padding.top
pkln4tw64#
在我的例子中,最高安全区域是问题所在,一个实用的解决方案是使用AppBar().preferredSize.height将填充设置为应用程序栏的高度
Padding( padding: EdgeInsets.fromLTRB(0,AppBar().preferredSize.height,0,0), child: Text( 'Your Order', style: headingMediumBlack, ), ),
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?
ttisahbt6#
面对这个问题也是一流的。使用dart:ui.window.viewPadding.top / ui.window.devicePixelRatio解决工作原理:dart:ui.window.viewPadding是视图可以渲染到的显示矩形每一边的物理像素数,除以ui.window.devicePixelRatio我们应该得到逻辑像素。总结代码是
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, ), ), );
pkmbmrz77#
恕我直言,最简单的解决方法是将InitialChildSize设置为0.9
InitialChildSize
DraggableScrollableSheet( initialChildSize: 0.9, minChildSize: 0.2, maxChildSize: 0.9, expand: false, builder: (BuildContext context, ScrollController scrollController) { } )
vlf7wbxs8#
此问题已修复-只需在showModalBottomSheet中设置useSafeArea: true。https://github.com/flutter/flutter/issues/39205
useSafeArea: true
8条答案
按热度按时间sq1bmfud1#
只需将 showModalBottomSheet 的根控件设置为安全区域控件
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填充顶部,左侧和右侧。
zphenhs43#
我解决了这个问题,添加容器和填充内:
MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top
不要从上下文(如
MediaQuery.of(context).padding.top
)获取,因为填充始终返回0pkln4tw64#
在我的例子中,最高安全区域是问题所在,一个实用的解决方案是使用AppBar().preferredSize.height将填充设置为应用程序栏的高度
6rqinv9w5#
我试用了这段简单的代码,它在iOS模拟器和iPhone X中按预期工作:
您使用的是什么版本的Flutter?
ttisahbt6#
面对这个问题也是一流的。
使用
dart:ui.window.viewPadding.top / ui.window.devicePixelRatio
解决工作原理:
dart:ui.window.viewPadding
是视图可以渲染到的显示矩形每一边的物理像素数,除以ui.window.devicePixelRatio
我们应该得到逻辑像素。总结代码是
pkmbmrz77#
恕我直言,最简单的解决方法是将
InitialChildSize
设置为0.9vlf7wbxs8#
此问题已修复-只需在
showModalBottomSheet
中设置useSafeArea: true
。https://github.com/flutter/flutter/issues/39205