安全区域在 showModalBottomSheet 中不起作用

Question

Safearea() 未正确包装 showModalBottomSheet。我需要在状态栏下显示模态框。

class ModalBottomSheet {
  static void renderModalBottomSheet(BuildContext context, Widget widget) {
    showModalBottomSheet(
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(border2),
        ),
      ),
      context: context,
      builder: (BuildContext context) {
        return SafeArea(
          child: Container(
            padding: EdgeInsets.only(
              bottom: MediaQuery.of(context).viewInsets.bottom,
            ),
            child: widget,
          ),
        );
      },
    );
  }
}

我已经尝试了以下解决方案，但仍然无法正常工作

MediaQuery.of(context).padding.top


MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top

更新：

我设法用这种方法解决了。

将其添加到底部表格

backgroundColor: Colors.transparent,

和衬垫上衣

top: MediaQuery.of(context).padding.top,

完整代码：

class ModalBottomSheet {
  static void renderModalBottomSheet(BuildContext context, Widget widget) {
    showModalBottomSheet(
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      context: context,
      builder: (_) {
        return SafeArea(
          child: Padding(
            padding: EdgeInsets.only(
              top: MediaQuery.of(context).padding.top,
              bottom: MediaQuery.of(context).viewInsets.bottom,
            ),
            child: widget,
          ),
        );
      },
    );
  }
}

您的子窗口小部件可以有边框半径和颜色。

打开键盘

封闭式键盘

Answer 1

有一个新功能可以解决这个问题——在

useSafeArea: true

中设置

showModalBottomSheet

。 https://github.com/flutter/flutter/issues/39205

Answer 2

您应该在

MediaQuery.of(context).viewPadding.top

之前获取

showModalBottomSheet

并将其传递到工作表内部，然后在工作表内部使用

EdgeInsets.top

。

Answer 3

这对你有用。

showModalBottomSheet<void>(
      context: context,
      isScrollControlled: true,
      backgroundColor: AppColors.transparent,
      builder: (context) {
        final safeAreaPadding = MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top;
    
        return Padding(
          padding: EdgeInsets.only(top: safeAreaPadding),
          child: Container(
            decoration: const BoxDecoration(
              color: AppColors.white,
              borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
            ),
            child: const _YourChild(),
          ),
        );
      },
    );
    
    class _YourChild extends StatelessWidget {
      const _YourChild();
    
      @override
      Widget build(BuildContext context) {
        return Container(height: MediaQuery.of(context).size.height);
      }
    }

Answer 4

试试这个。如果不起作用，请参考此页面

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

Answer 5

显示ModalBottomSheet( isScrollControlled: true, 上下文：上下文， 构建器：（上下文）{ 返回媒体查询（ 数据：MediaQueryData.fromWindow(WidgetsBinding.instance.window), 孩子：安全区域（ 子项：列（ 孩子们： [ 排（ 孩子们： [ 图标按钮( onPressed: () => Navigator.of(context).pop(), 图标：常量图标（Icons.close）， ), ], ), 展开（ 孩子：ListView.builder（ itemBuilder: (上下文, 索引) => ListTile( 标题: Text('项目 $index'), ), 项目数量：10， ), ), ], ), ), ）； }, );