同じウェブサイトなのに、PCとモバイルで挙動が違う
ある種「ご自慢」の伸縮時間軸。
Flutter誕生を飾ったDemoアプリ「History of Everything」から
強引に切り出し、Flutter3に適応させて、使ってきた。
素人は手を出すなと言われたRenderObjectをバリバリ使って、
zoom-in,outで、オブジェクトが現れたり、重なって消えたりする。
モバイルだと、ちゃんと動く。
PC上のSimulatorなら、マウス操作でも動く。
その時は、option＋クリックで画面上にtouchマークが二つ出るので、
それを動かすと、動く。
が、Webサイトとして運営すると、うまくいかない。
そのWebサイトをモバイルからブラウザ経由で見て、タッチ操作すれば動く。
けれども、PCから見て、マウスで操作しても、動かない。
マウスでスクロールはできる。が、ズームはできない。
クロスプラットフォームとはいっても、なにもかも同じには動かないということか。
GestureDetectorしか設定してないからねえ。
他人様のcodeから拝借していて、意味がよくわからないまま運営しているからいけない。
それでも使い始めてすでに２年以上。
GestureDetectorが使われているのはわかっている。
だからモバイルでは動く。
わざわざこう指定している以上、「マウス受付中」も明示する必要があるのか？
爺様4.5に感謝
return Scaffold(
body: Listener(
onPointerSignal: (pointerSignal) {
if (pointerSignal is PointerScrollEvent) {
final scaleChange = pointerSignal.scrollDelta.dy > 0 ? 1.1 : 0.9;
_handleMouseZoom(pointerSignal.localPosition, scaleChange);
}
},
child: GestureDetector(
onLongPress: _longPress,
onTapDown: _tapDown,
onScaleStart: _scaleStart,
onScaleUpdate: _scaleUpdate,
onScaleEnd: _scaleEnd,
onTapUp: _tapUp,
child: Stack(
children: <Widget>[
TimelineRenderWidget(
timeline: timeline,
topOverlap: topOverlap + devicePadding.top,
focusItem: widget.focusItem,
touchBubble: onTouchBubble,
touchEntry: onTouchEntry,
),
// 残りのコードは変更なし
],
),
),
),
);
GestureDetectorを、「マウス受付中」でラップしました。
Discussion