如何在Flutter Camera插件中实现点击对焦功能

基础实现步骤 #

• 首先确认你使用的是官方camera插件0.10.0及以上版本，该版本开始原生支持对焦点设置能力
• 用GestureDetector组件包裹CameraPreview，在onTapUp回调中获取触摸点的相对坐标，示例代码如下：

GestureDetector(
  onTapUp: (details) async {
    // 1. 获取预览组件的尺寸
    final previewSize = controller.value.previewSize!;
    // 2. 把全局触摸坐标转换为相对于预览组件的局部坐标
    final localPosition = details.localPosition;
    // 3. 坐标归一化，转换为0~1范围的比例值
    final x = localPosition.dx / previewSize.width;
    final y = localPosition.dy / previewSize.height;
    // 4. 适配部分平台坐标翻转问题，可根据实际测试情况调整
    final adjustedPoint = Platform.isIOS ? Offset(1 - x, 1 - y) : Offset(x, y);
    
    // 5. 先判断设备是否支持设置对焦点
    if (controller.value.isFocusPointSupported) {
      // 设置对焦点
      await controller.setFocusPoint(adjustedPoint);
      // 可选：同步设置曝光点，提升对焦区域的曝光效果
      if (controller.value.isExposurePointSupported) {
        await controller.setExposurePoint(adjustedPoint);
      }
      // 触发自动对焦
      await controller.setFocusMode(FocusMode.auto);
    }
  },
  child: CameraPreview(controller),
)

常见问题适配 #

• 如果你的应用支持屏幕旋转，需要在坐标转换前先获取当前的设备方向，对坐标做对应的旋转适配，避免对焦位置和点击位置不一致
• 如果你对预览做了裁剪、缩放适配（比如全屏显示预览），需要先把点击坐标转换为原始预览尺寸对应的坐标，再做归一化处理
• 部分设备不支持对焦点设置，调用相关接口前必须做能力判断，否则会抛出异常

内容的提问来源于stack exchange，提问作者Ryan Wang