如下圖:
開始還以為是 Flutter 返回的問題姆另,使用 WillPopScope 禁用返回,沒有效果坟乾。
側(cè)滑的問題只有 Safari 瀏覽器有問題迹辐。
最后發(fā)現(xiàn)不是 Flutter 層面的問題,側(cè)滑返回是Safari瀏覽器的功能甚侣。
目前能找到的解決方案是在 index.html 層面做一些操作明吩,將最左邊的一小部分區(qū)域禁用,這樣用戶滑動就無效了殷费。
但是也無法徹底避免印荔,有時候還是能滑出來,但也勉強好一些详羡。
我使用下面的代碼仍律,實測有效 (將下面代碼放在 項目/web/index.html 的 <script></script> 標簽里面):
function handleTouchMove(event, xStart, yStart) {
var xDiff = xStart - event.touches[0].pageX;
var yDiff = yStart - event.touches[0].pageY;
// Prevent horizontal swipe
if (xDiff > 20 && Math.abs(xDiff) > Math.abs(yDiff)) {
event.preventDefault();
}
}
var newHandleTouchMove = function (xStart, yStart) {
return function (event) {
handleTouchMove(event, xStart, yStart);
};
}
document.addEventListener('touchstart', function (startEvent) {
// Ignore multi-touch gestures
if (startEvent.touches.length > 1) {
return;
}
var xStart = startEvent.touches[0].pageX;
var yStart = startEvent.touches[0].pageY;
// Attach the touchmove event listener
document.addEventListener('touchmove', newHandleTouchMove(xStart, yStart), { passive: false });
}, { passive: false });
當網(wǎng)頁徹底加載完成之后,最左側(cè)滑動就不會有反應(yīng)了殷绍。
關(guān)聯(lián)鏈接:
https://github.com/flutter/flutter/issues/114324
https://github.com/flutter/gallery/issues/898
https://github.com/flutter/flutter/issues/76478