Flutter模态框管理插件modals的使用

Flutter中的modals插件简化了Overlay（覆盖层）的操作。无论是显示上下文菜单还是其他类型的弹出框，这个插件都能轻松应对。本文将介绍如何使用modals插件来展示、定位和移除模态框。

功能特性

• 简单地显示模态框
  • 使用绝对位置定位模态框
  • 使用对齐方式定位模态框
  • 基于另一个小部件的位置定位模态框
• 设置模态框的优先级
• 方便地移除模态框
  • 通过ID移除模态框
  • 一次性移除所有模态框
  • 点击遮罩层时移除模态框
  • 在路由变化时移除模态框

如何使用

显示模态框

使用showModal函数可以显示模态框，该函数接受一个ModalEntry作为参数。ModalEntry有三种类型：positioned, aligned, 和 anchored。

Positioned（绝对定位）

class PositionedModalExample extends StatelessWidget {
  const PositionedModalExample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          showModal(ModalEntry.positioned(context,
              tag: 'containerModal',
              left: 200,
              top: 200,
              child: Container(
                color: Colors.red,
                width: 50,
                height: 50,
              )));
        },
        child: const Text('Show Modal'),
      ),
    );
  }
}

此示例将你的widget定位在屏幕左上角偏移200, 200的位置。

Aligned（对齐定位）

class AlignmentModalExample extends StatelessWidget {
  const AlignmentModalExample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          showModal(ModalEntry.aligned(context,
              tag: 'containerModal',
              alignment: Alignment.center,
              child: Container(
                color: Colors.red,
                width: 50,
                height: 50,
              )));
        },
        child: const Text('Show Modal'),
      ),
    );
  }
}

此示例将你的widget居中显示在屏幕上。

Anchored（锚点定位）

class AnchoredModalExample extends StatelessWidget {
  const AnchoredModalExample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          const ModalAnchor(
              tag: 'anchor',
              child: Card(
                color: Colors.grey,
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.anchor),
                ),
              )),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(
                onPressed: () {
                  showModal(ModalEntry.anchored(context,
                      tag: 'anchoredModal',
                      anchorTag: 'anchor',
                      modalAlignment: Alignment.centerLeft,
                      anchorAlignment: Alignment.centerRight,
                      child: Container(
                        color: Colors.red,
                        width: 50,
                        height: 50,
                      )));
                },
                child: const Text('Show Modal'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

此示例展示了如何将widget放置在ModalAnchor widget旁边。要使某个小部件成为锚点，请用ModalAnchor包裹它。

模态框优先级

为了设置模态框的优先级，可以使用aboveTag和belowTag参数。

• aboveTag: 将模态框放在指定标签之上。
• belowTag: 将模态框放在指定标签之下。

移除模态框

你可以通过以下四种方式移除模态框：

• removeModal(String id)：根据给定的ID移除模态框。
• removeAllModals()：移除所有模态框。
• 配置ModalEntry中的参数：
  • barrierDismissible: 当设置为true（默认是false），点击遮罩层时会移除模态框。
  • barrierColor: 改变遮罩层的颜色（默认是Colors.transparent）。
  • removeOnPop: 当存在模态框的路由被弹出时移除模态框。
  • removeOnPushNext: 当新的路由被推送到当前路由之上时移除模态框。

要在路由变化时观察并移除模态框，请在根Widget中添加导航器观察者：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppModals',
      navigatorObservers: [modalsRouteObserver],
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const _Home(),
    );
  }
}