底部弹出窗口中的SafeArea未生效

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,
          ),
        );
      },
    );
  }
}

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

打开键盘

关闭键盘

- Marlon Parra Ruiz

Answer 1

有一个新功能可以解决这个问题--在 showModalBottomSheet 中设置 useSafeArea: true。 https://github.com/flutter/flutter/issues/39205

- Luke Hutchison

Answer 2

试试这个。如果不行，参考这个页面

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

- Anand

---

我已经尝试了那个其他问题上的所有答案，但模态框仍然会出现在状态栏后面。 - Marlon Parra Ruiz

Answer 3

在调用 showModalBottomSheet 之前，你应该先获取 MediaQuery.of(context).viewPadding.top 并将其传递给弹出的窗口，然后在窗口内使用 EdgeInsets.top。

- Ares

---

这只是在底部表格顶部添加填充，即使底部表格没有占据屏幕的全部高度也会显示。 - Luke Hutchison

Answer 4

这对你来说是可行的。

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);
      }
    }

- shuster