开启生长之旅！这是我参与「日新方案 12 月更文挑战」的第14天，点击检查活动详情

Flutter Web 系列

《Flutter Web – 让 Web 与 APP UI 共同的另一种或许》

《Flutter Web – 高雅的兼容 Flutter App 代码》

（日新方案的最终一更，献给这个天坑）[真狗头]。

最近一向在调试 Flutter for Web 项目，现已到了最终小问题调整的阶段。但这些小问题有的的确非常的棘手，并且以 iOS Safari 的居多。比如前几天发的 《Flutter Web – 如何适配 iphone 安全区域》 便是底部栏适配 Safari 呈现的问题。

必须先吐槽 Flutter 官方，这是有多瞧不上 iOS Safari [狗头*10086] …

问题描绘

直接看录的 Demo 视频（伪，还不支撑上传视频，转成 gif）：

找到一个（不）合适的滑动办法（不正常的概率仍是比较大的），就能够把页面变得要多古怪就有多古怪，像是抽风了一样，但假如是运用浏览器的回来或者导航栏的回来都是正常的 …

实践进程

其实这个问题在 Flutter 多引擎烘托组件开发的现已留意到了，只不过一向觉得是小问题，所以拖到项目上把 App 页面烘托到 Web 上的调试阶段时，才预备处理一下。

禁用侧滑回来

最开端并没有想到是 Safari 本身的问题，只觉得是 Flutter 路由动画上有问题，有问题就想着先禁用掉侧滑回来看看，所以直接在根节点加上 WillPopScope。

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WillPopScope(
        onWillPop: () async => false,
        child: ...,
      ),
    );

然并卵，禁用不了侧滑回来，该什么样就什么样 …

与 Android 对比

想到跟 Android 对比下，但手上没有真机，就在公司的真机平台试了试

彻底没办法侧滑，说明 WillPopScope 操控仍是有用的，但对 iOS 浏览器没作用。

寻觅原因

这时能够确认应该是在 iOS 浏览器的适配上有问题，这时候就只能 Google 来寻觅处理方案了，感觉应该也是一个普适性问题，但一开端的确没搜到，搜索姿势不对，侧滑回来要搜 “swiped back” 公然 github 上的确有类似的问题，传送门：

github.com/flutter/flu…

github.com/flutter/flu…

github.com/flutter/flu…

都是 open 状况，并且最早的是在2020年就提出来了，评级 P5，根本没有人想去处理（当然，比起 Flutter 那么多高 P 的 issues，或许真的是没工夫处理这种“小问题”）。

里面的谈论这里总结下，问题的原因是：在触发到体系的侧滑回来后，Flutter 会重新加载整个 Web 应用，并且这个加载进程并不是正常的，所以有各种各样的古怪现象。

暂时处理办法

那如何破局？谈论里找到一个办法，经过拦截边缘的响应事件，来削减呈现的频率。

      window.addEventListener("load", function () {
        var loading = document.querySelector("#loading");
        _flutter.loader
          .loadEntrypoint({
            serviceWorker: {
              serviceWorkerVersion: serviceWorkerVersion,
            },
          })
          ....
          .then(function (_) {
            const flutterRoot = document
              .getElementsByTagName("flt-glass-pane")
              .item(0);
            flutterRoot.addEventListener("touchstart", (e) => {
              if (e.pageX > 24 && e.pageX < window.innerWidth - 24) return;
              e.preventDefault();
            });
          });
      });

对 flt-glass-pane 标签增加 touchstart 监听，假如手势起点在左右两头 24 边距内则忽略。

这办法笔者加了试了，的确能够降低概率，但仍是不能彻底避免。并且假如界面上有边缘操作，那或许会被阻挡 …

后续

假如是在自己的 App 上加载的话，就很简单禁用掉侧滑回来。

但这个 Wap 项目最终是在微信小程序中加载，所以想着咱们在微信小程序中禁用掉侧滑回来不就好了，找到 disableSwipeBack 禁用办法，但用不了了：

微信：我支撑禁用了侧滑回来，过了 0.0.5 个版别，我又不支撑了，我任性，你气不气？

所以至此，只能用上述的暂时处理办法，以及把 SPA 的 Flutter Web 开端拆分红多个 web-view 加载来尽或许削减用户误操作的概率了 …

但回过头来想一想，同样是 SPA，为什么 Vue / React 没有这种问题？感觉 Flutter for Web 应该也有彻底处理的办法，但需要有时间去深追源码了。

感谢阅览，假如对你有用请点个赞 ❤️