Flutter - 如何将 showModalBottomSheet 设置为全高但低于状态栏？

Question

我可以通过使用showModalBottomSheet(...)和设置属性使 bottomSheet 达到全高isScrollControlled:true。

但是，底部工作表位于状态栏上方，这不是我所期望的。

是否可以将其置于状态栏下方？谢谢

Answer 1

自2022年7月20日起，您可以将useSafeArea参数设置为true在状态栏下显示模态，您可以在此处找到详细信息。

showModalBottomSheet<void>(
  useSafeArea: true, // <<<<< use this
  // ....
);

注意：现在仅在频道上提供master，稍后将在stable频道上提供。

Answer 2

作为一个选项，您可以修改底部工作表 1. 创建新文件 custom_bottom_sheet.dart 2. 将所有代码从 bottom_sheet 类复制粘贴到您的自定义类中 3. 像这样修改 buildPage() 方法

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    final BottomSheetThemeData sheetTheme = theme?.bottomSheetTheme ?? Theme.of(context).bottomSheetTheme;
    Widget bottomSheet = SafeArea(
      child: _ModalBottomSheet<T>(
        route: this,
        backgroundColor: backgroundColor ?? sheetTheme?.modalBackgroundColor ?? sheetTheme?.backgroundColor,
        elevation: elevation ?? sheetTheme?.modalElevation ?? sheetTheme?.elevation,
        shape: shape,
        clipBehavior: clipBehavior,
        isScrollControlled: isScrollControlled,
        enableDrag: enableDrag,
      ),
    );
    if (theme != null) bottomSheet = Theme(data: theme, child: bottomSheet);
    return bottomSheet;
  }

4. 使用你的课程

    import 'package:flutter/material.dart';
    import 'custom_bottom_sheet.dart' as bs;

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: SafeArea(child: Page()),
          ),
        );
      }
    }

    class Page extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: RaisedButton(
            child: Text('show'),
            onPressed: () {
              bs.showModalBottomSheet(
                context: context,
                isScrollControlled: true,
                builder: (context) => Container(color: Colors.red),
              );
            },
          ),
        );
      }
    }

这里是修改过的bottom_sheet类https://pastebin.com/5U7fsqCw

我也认为你需要添加属性

barrierColor: Colors.white.withOpacity(0),

防止状态栏变暗

Answer 3

无需创建新类。只需将变量分配给视图构建上的填充，并在打开对话框时使用它即可。

class MyHomeScreenState extends State<MyHomeScreen> {
  double? topPadding;
  
  @override
  Widget build(BuildContext context) {
    topPadding = MediaQuery.of(context).padding.top;
  //...
  }

showModalBottomSheet(
        context: context,
        useRootNavigator: true,
        isScrollControlled: true,
        builder: (context) {
          return Container(
            height: MediaQuery.of(context).size.height -
                topPadding!,
            color: Colors.green,
          );
});

如果你查看SafeArea源代码，这正是正在发生的事情。确保您的构建位于小部件树上的“根”级别，因为后代小部件可能没有顶部填充，因为它们不在边缘下方。