本文为社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！

前语

当时 App 的规划趋势越来越希望给用户沉浸式体会，这种规划会让用户尽量停留在当时的界面，而不需求太多的跳转，这就需求引进弹层。比方，抖音引进购物功用后，就完结了在观看视频界面可以通过弹层完结参加购物车、下单操作，无需脱离当时的视频界面。本篇咱们就来讲讲弹层这块需求留意哪些用户体会。

沉浸式弹层越来越多，开发该怎么做好弹层体验？

弹层的形式挑选

弹层从形式上来说有中心弹层、左边弹层、右侧弹层、底部弹层和顶部弹层，如下图所示。

沉浸式弹层越来越多，开发该怎么做好弹层体验？
移动端经过这么多年的开展，不同的弹层的使用场景相对来说比较固定。因而，在挑选的时分，主张遵从现有的习气来挑选适宜的弹层。

  • 中心弹层：一般用于问询对话框形式，例如退出登录、删去操作的二次承认。
  • 左边弹层：一般用于抽屉式的个人中心或设置界面，这种一般是底部栏无法放下个人中心类界面的时分一个不错的挑选。
  • 右侧弹层：一般用于做数据挑选，典型的场景是购物类使用的精准挑选。
  • 底部弹层：这种非常常见，如咱们说到的现在抖音的商品购买，还有像单选、多选、级联挑选、时间挑选等等。
  • 顶部弹层：顶部弹层一般也是用于挑选，比较常见的是列表表头的挑选，或者导航栏带类似 PC 端的下拉类的挑选。

这里需求提两个比较通用的准则：

  1. 弹层呈现的方位应当尽量靠近触发交互的方位，比方点击导航栏左上角的按钮一般会从左边弹出。
  2. 蒙层的色彩要根据实际情况来定，一般都是黑色半透明的蒙层，可是主要面对是为了让用户可以看清蒙层底下的内容，比方假如是在视频播放页面叠加蒙层就会影响用户体会了。

接下来咱们依次来用 Flutter 完结上述的5类弹层，并讲讲一些体会关键。

中心弹层

中心弹层在 Flutter中可以通过showDialog 和 ShowCupertinoDialog(iOS 风格）完结，下面是示例代码。

showDialog(
    context: context,
  	barrierDismissible: false,
    builder: (_) => AlertDialog(
      title: const Text('操作提醒'),
      content: const Text('承认要进行此操作吗？'),
      actionsAlignment: MainAxisAlignment.end,
      actions: [
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text('撤销'),
        ),
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text(
            '删去',
            style: TextStyle(color: Colors.red),
          ),
        ),
      ],
    ),
  );

这里有一个体会要素是是否支撑点击底部的黑色蒙层躲藏弹层。一般来说，假如是二次承认类操作，主张不关键击蒙层躲藏。由于用户的操作目的性非常明确，假如不小心误触的话，用户还得再点击一次。这个时分需求设置barrierDismissible为 false。

左右抽屉弹层

在 Flutter 的 Scaffold 中 供给了两个属性来设置左边抽屉和右侧抽屉弹层，对应的参数分别是 drawer 和 endDrawer。咱们来看看具体的代码。

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('左右抽屉弹层'),
      backgroundColor: Colors.red[800],
      leading: Builder(builder: (context) {
        return IconButton(
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
          icon: const Icon(
            Icons.menu,
          ),
        );
      }),
      actions: [
        Builder(builder: (context) {
          return IconButton(
            onPressed: () {
              Scaffold.of(context).openEndDrawer();
            },
            icon: const Icon(
              Icons.filter_list_alt,
            ),
          );
        }),
      ],
    ),
    drawer: Container(
      width: MediaQuery.of(context).size.width * 3 / 4,
      color: Colors.white,
      child: Center(
        child: TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text('收起'),
        ),
      ),
    ),
    endDrawer: Container(
      width: MediaQuery.of(context).size.width * 3 / 4,
      color: Colors.blue,
      child: Center(
        child: TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text(
            '收起',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    ),
    body: const Center(child: Text('抽屉示例')),
  );
}

完结的作用如下图所示。实用左边或右侧弹层需留意三个体会要素：

  1. 宽度：主张设置为屏幕宽度的3/4，这种宽度抽屉的显现内容满足宽，而底下的蒙层点击区域宽度也比较适宜点击退出弹层。
  2. 顶部内容区域需求留意留出必定的头部方位（比方左边一般会放头像+昵称），一个是漂亮，一个是要避免显现内容碰到了手机屏幕的挖孔方位。
  3. 一般侧边弹层点击蒙层都会支撑收起，所以主张保存这个操作习气，而不是非得点弹层的某个按钮才封闭弹层。

沉浸式弹层越来越多，开发该怎么做好弹层体验？

顶部弹层

顶部弹层在 Flutter 中需求自己去完结，一个比较好的方式是使用 showGeneralDialog来完结。这里有个技巧是实用 Column 组件可以让内容区靠顶部，然后利用动画完结从上往下滑的弹出作用。下面是完结代码，实际通过这种方式可以完结底部，左边，右侧和中心的弹层。

showGeneralDialog(
  context: context,
  barrierDismissible: true,
  transitionDuration: const Duration(milliseconds: 300),
  barrierLabel: MaterialLocalizations.of(context).dialogLabel,
  barrierColor: Colors.black.withOpacity(0.5),
  pageBuilder: (context, _, __) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width,
          color: Colors.white,
          child: Card(
            margin: const EdgeInsets.all(0),
            child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                ListTile(
                  title: const Text('选项 1'),
                  onTap: () => Navigator.of(context).pop('1'),
                ),
                ListTile(
                  title: const Text('选项2'),
                  onTap: () => Navigator.of(context).pop('2'),
                ),
                ListTile(
                  title: const Text('选项3'),
                  onTap: () => Navigator.of(context).pop('3'),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  },
  transitionBuilder:
      (context, animation, secondaryAnimation, child) {
    return SlideTransition(
      position: CurvedAnimation(
        parent: animation,
        curve: Curves.easeOut,
      ).drive(Tween<Offset>(
        begin: const Offset(0, -1.0),
        end: Offset.zero,
      )),
      child: child,
    );
  },
);

作用如下所示，顶部弹层弹出的方向最好是从上到下，假如是从下到上的话移动间隔过长，会觉得很突兀。

沉浸式弹层越来越多，开发该怎么做好弹层体验？

底部弹层

底部弹层和顶部弹层其实是类似的，而且更为常见一点。之前在文章底部弹窗ModelBottomSheet详解有过介绍，这里就不再讲具体完结了。说一下底部弹层的几个体会关键：

  1. 弹出方向从底部往上弹出，动画时长主张200-300毫秒；
  2. 假如是多选这种需求二次承认操作的，需求在顶部供给承认和撤销按钮；
  3. 适用选项不太多的场景，假如挑选的内容许多主张单独跳转到挑选页面完结，而且支撑含糊查找匹配选项；
  4. 需求区别选中项，让用户知道之前的选项；
  5. 假如涉及到网络恳求，主张是在网络恳求完结后再封闭弹层，由于有可能操作失败导致用户需求再次操作。

总结

本篇介绍了各类弹层开发进程的体会留意点，一起给出了示例代码。随着沉浸式体会的推动，弹层会越来越多，因而主张各位开发同学也可以多多考虑弹层怎么改进用户体会，虽然咱不是产品司理也不是规划师，可是从开发视点给产品和规划一些专业的意见，也是可以“提升话语权”的，嘿嘿！