面试题：Flutter 中复杂手势操作在双平台的适配优化

1. 检测平台

在Flutter中，可以使用flutter/foundation.dart库中的defaultTargetPlatform来检测当前运行的平台。

import 'package:flutter/foundation.dart';

if (defaultTargetPlatform == TargetPlatform.iOS) {
  // iOS 相关操作
} else if (defaultTargetPlatform == TargetPlatform.android) {
  // Android 相关操作
}

2. 手势识别

使用GestureDetector来识别用户手势。常见的用于缩放和旋转的手势有ScaleUpdateDetails（缩放）和RotationUpdateDetails（旋转）。

GestureDetector(
  onScaleUpdate: (ScaleUpdateDetails details) {
    // 处理缩放逻辑
  },
  onRotationUpdate: (RotationUpdateDetails details) {
    // 处理旋转逻辑
  },
  child: YourImageWidget(),
)

3. iOS 操作习惯适配

缩放：通常是双指捏合缩放。在onScaleUpdate中，details.scale表示缩放因子。

double _scale = 1.0;
onScaleUpdate: (ScaleUpdateDetails details) {
  setState(() {
    _scale *= details.scale;
  });
},

旋转：通常是双指旋转。在onRotationUpdate中，details.rotation表示旋转弧度。

double _rotation = 0.0;
onRotationUpdate: (RotationUpdateDetails details) {
  setState(() {
    _rotation += details.rotation;
  });
},

4. Android 操作习惯适配

缩放：可能单指双击缩放。可以通过检测TapDownDetails结合状态变量来实现。

bool _isDoubleTap = false;
double _doubleTapScale = 1.0;
onTapDown: (TapDownDetails details) {
  if (!_isDoubleTap) {
    Future.delayed(const Duration(milliseconds: 300), () {
      if (!_isDoubleTap) {
        _doubleTapScale = 1.0;
      }
    });
    _isDoubleTap = true;
  } else {
    setState(() {
      _doubleTapScale = _doubleTapScale == 1.0? 2.0 : 1.0;
    });
    _isDoubleTap = false;
  }
},

旋转：可能通过双指滑动旋转。可以在onPanUpdate中计算旋转角度。

double _panRotation = 0.0;
Offset _previousPosition;
onPanUpdate: (DragUpdateDetails details) {
  if (_previousPosition != null) {
    double dx = details.globalPosition.dx - _previousPosition.dx;
    double dy = details.globalPosition.dy - _previousPosition.dy;
    setState(() {
      _panRotation += dx / 100; // 简单示例，可调整比例
    });
  }
  _previousPosition = details.globalPosition;
},
onPanEnd: (DragEndDetails details) {
  _previousPosition = null;
},

5. 应用变换

使用Transform widget 应用缩放和旋转变换到图片上。

Transform(
  alignment: Alignment.center,
  transform: Matrix4.identity()
  ..scale(_scale)
  ..rotateZ(_rotation + _panRotation),
  child: Image.asset('your_image_path.jpg'),
)

6. 性能优化

缓存：使用Cache机制来缓存已经处理过的图片尺寸和旋转角度，避免重复计算。
少用setState：尽量合并状态更新，减少setState调用次数，因为每次调用setState都会触发重建。
图片压缩：在加载图片前对图片进行适当压缩，以减少内存占用和提高加载速度。可以使用image库来进行图片压缩。

import 'package:image/image.dart' as img;

Future<Uint8List> compressImage(Uint8List imageData) async {
  img.Image? decoded = img.decodeImage(imageData);
  if (decoded == null) return imageData;
  img.Image compressed = img.copyResize(decoded, width: 800); // 可调整宽度
  return img.encodeJpg(compressed);
}

星途面试题库