Flutter：浅谈ModalBottomSheet和PersistentBottomSheet

2024-02-14 00:01:00

前言

Flutter是一个开源的移动应用程序SDK，用于构建美观且原生的Android和iOS应用程序。它使用Dart语言编写，并提供了一套丰富的组件和工具来构建用户界面。其中，ModalBottomSheet和PersistentBottomSheet是两个非常有用的组件，可以帮助我们创建各种各样的底部弹出窗口。

ModalBottomSheet

ModalBottomSheet是一个模态底部弹出窗口，它会占据整个屏幕，并且在它显示时禁用后面的内容。这种类型的弹出窗口通常用于显示重要信息或需要用户立即采取行动的情况。

使用方法

要在Flutter中使用ModalBottomSheet，首先需要导入material库：

import 'package:flutter/material.dart';

然后，可以在Scaffold的body属性中使用showModalBottomSheet方法来显示一个ModalBottomSheet：

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a ModalBottomSheet'),
      ),
    );
  },
);

自定义外观

ModalBottomSheet的默认外观是一个白色背景，上面有一个圆角矩形内容区域。但是，我们可以通过设置backgroundColor、shape和elevation属性来自定义它的外观。

例如，要将ModalBottomSheet的背景颜色设置为黑色，可以这样写：

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.black,
      child: Center(
        child: Text('This is a ModalBottomSheet'),
      ),
    );
  },
  backgroundColor: Colors.black,
);

要将ModalBottomSheet的形状设置为圆形，可以这样写：

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a ModalBottomSheet'),
      ),
    );
  },
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
);

要将ModalBottomSheet的阴影高度设置为10，可以这样写：

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a ModalBottomSheet'),
      ),
    );
  },
  elevation: 10.0,
);

事件处理

ModalBottomSheet可以通过设置barrierColor属性来控制当用户点击背景时是否关闭它。默认情况下，barrierColor属性设置为Colors.black54，这意味着当用户点击背景时，ModalBottomSheet会关闭。

如果要让ModalBottomSheet在用户点击背景时不关闭，可以将barrierColor属性设置为Colors.transparent。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a ModalBottomSheet'),
      ),
    );
  },
  barrierColor: Colors.transparent,
);

ModalBottomSheet还可以通过设置enableDrag属性来控制用户是否可以通过拖动来关闭它。默认情况下，enableDrag属性设置为true，这意味着用户可以通过拖动来关闭ModalBottomSheet。

如果要让ModalBottomSheet无法通过拖动来关闭，可以将enableDrag属性设置为false。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a ModalBottomSheet'),
      ),
    );
  },
  enableDrag: false,
);

PersistentBottomSheet

PersistentBottomSheet是一个持久化底部弹出窗口，它会占据屏幕的底部，并且在它显示时不会禁用后面的内容。这种类型的弹出窗口通常用于显示次要信息或允许用户快速访问某些功能。

使用方法

要在Flutter中使用PersistentBottomSheet，首先需要导入material库：

import 'package:flutter/material.dart';

然后，可以在Scaffold的body属性中使用showPersistentBottomSheet方法来显示一个PersistentBottomSheet：

showPersistentBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a PersistentBottomSheet'),
      ),
    );
  },
);

自定义外观

PersistentBottomSheet的默认外观是一个白色背景，上面有一个圆角矩形内容区域。但是，我们可以通过设置backgroundColor、shape和elevation属性来自定义它的外观。

例如，要将PersistentBottomSheet的背景颜色设置为黑色，可以这样写：

showPersistentBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.black,
      child: Center(
        child: Text('This is a PersistentBottomSheet'),
      ),
    );
  },
  backgroundColor: Colors.black,
);

要将PersistentBottomSheet的形状设置为圆形，可以这样写：

showPersistentBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a PersistentBottomSheet'),
      ),
    );
  },
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
);

要将PersistentBottomSheet的阴影高度设置为10，可以这样写：

showPersistentBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a PersistentBottomSheet'),
      ),
    );
  },
  elevation: 10.0,
);

事件处理

PersistentBottomSheet可以通过设置barrierColor属性来控制当用户点击背景时是否关闭它。默认情况下，barrierColor属性设置为Colors.transparent，这意味着当用户点击背景时，PersistentBottomSheet不会关闭。

如果要让PersistentBottomSheet在用户点击背景时关闭，可以将barrierColor属性设置为Colors.black54。

showPersistentBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a PersistentBottomSheet'),
      ),
    );
  },
  barrierColor: Colors.black54,
);

PersistentBottomSheet还可以通过设置enableDrag属性来控制用户是否可以通过拖动来关闭它。默认情况下，enableDrag属性设置为true，这意味着用户可以通过拖动来关闭PersistentBottomSheet。

如果要让PersistentBottomSheet无法通过拖动来关闭，可以将enableDrag属性设置为false。

showPersistentBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a PersistentBottomSheet'),
      ),
    );
  },
  enableDrag: false,
);

常见问题

如何关闭ModalBottomSheet或PersistentBottomSheet？

可以通过调用Navigator.pop方法来关闭ModalBottomSheet或PersistentBottomSheet。

Navigator.pop(context);

如何在ModalBottomSheet或PersistentBottomSheet中添加按钮？

可以通过在ModalBottomSheet或PersistentBottomSheet的子组件中添加一个ElevatedButton来添加按钮。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('This is a ModalBottomSheet'),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Close'),
            ),
          ],
        ),
      ),
    );
  },
);