微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在 iOS 设备上拖动后抬起手指时,如何修复 GestureDetector.onScaleUpdate 中的偏移偏移?

如何解决在 iOS 设备上拖动后抬起手指时,如何修复 GestureDetector.onScaleUpdate 中的偏移偏移?

当我完成拖动 Positioned 小部件时,我注意到当我将手指从 iOS 设备 (iOS 14.6) 的屏幕上移开时,最终位置发生了微小的变化。此行为也存在于 iOS 模拟器中,但在物理设备上非常明显:

iOS device GestureDetector screen recording

——注意红色立方体停止移动后的轻微位置偏移。

演示的源代码

import 'package:Flutter/material.dart';
 
class GestureDemo extends StatefulWidget {
  const GestureDemo({Key? key}) : super(key: key);
 
  @override
  GestureDemoState createState() => GestureDemoState();
}
 
class GestureDemoState extends State<GestureDemo> {
 
  late Offset _startingFocalPoint;
 
  late Offset _prevIoUsOffset;
  Offset _offset = Offset.zero;
 
  late double _prevIoUsZoom;
  double _zoom = 1.0;
 
  final containerSize = Size(100,100);
 
  void _handleScaleStart(ScaleStartDetails details) {
    setState(() {
      _startingFocalPoint = details.focalPoint;
      _prevIoUsOffset = _offset;
      _prevIoUsZoom = _zoom;
    });
  }
 
  void _handleScaleUpdate(ScaleUpdateDetails details) {
    setState(() {
      _zoom = _prevIoUsZoom * details.scale;
 
      // Ensure that item under the focal point stays in the same place despite zooming
      final Offset normalizedOffset = (_startingFocalPoint - _prevIoUsOffset) / _prevIoUsZoom;
      _offset = details.focalPoint - normalizedOffset * _zoom;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,children: <Widget>[
        Positioned(
          top: _offset.dy,left: _offset.dx,child: GestureDetector(
            onScaleStart: _handleScaleStart,onScaleUpdate:_handleScaleUpdate,child: Container(
              color: Colors.red,width: containerSize.width * _zoom,height: containerSize.height * _zoom,),)
        ),],);
  }
}
 
void main() {
  runApp(MaterialApp(
    theme: ThemeData.dark(),home: Scaffold(
      appBar: AppBar(title: const Text('Gestures Demo')),body: const GestureDemo(),));
}

这是 Flutter 官方 widget gestures example 的简化版本。

当我登录 ScaleUpdateDetails 时,我看到最后一个 details一个小偏移

ScaleUpdateDetails(focalPoint: Offset(174.0,260.5),localFocalPoint: Offset(28.5,73.0),scale: 1.0,horizontalScale: 1.0,verticalScale: 1.0,rotation: 0.0,pointerCount: 1)
ScaleUpdateDetails(focalPoint: Offset(174.0,260.0),72.5),pointerCount: 1)
ScaleUpdateDetails(focalPoint: Offset(173.0,258.0),localFocalPoint: Offset(27.5,70.5),pointerCount: 1)

如何消除这种位置偏移?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。