flutter（android）扫二维码实现详解

作者: FluOrAnd | 来源:发表于2019-11-07 11:55 被阅读0次

flutter（android）扫二维码实现详解
Flutter 新手环境搭建和Android Studio配置以
结合ZXing实现类似微信扫二维码放大摄像头
ZXing扫码的优化及module化
随手笔记
flutter打包aar
图文混排
开源项目 - 收藏集 - 掘金
Flutter 布局
在已有Android项目中使用Flutter

项目 QRCodeFlutterPlugin

一个非常方便实用的二维码扫描、解析库，包含flutter端统一绘制页面，也包含native端各自绘制页面的实现方式。
项目demo apk
项目源码

已实现功能

flutter 端统一绘制页面，相机和本地相册识别的二维码
native端单独绘制的页面，实现的相机识别二维码
native端单自定义样式的页面，实现的相机识别二维码
native 本地图片二维码识别

TODO

二维码生成
二维码带logo生成
条形码生成
条形码识别包含本地图片和相机识别
iOS端实现

一 flutter 端统一实现的页面：

使用flutter PlatformView去实现，Android 端AndroidView，iOS端UiKitView。这种view方式实现可以参考网上的实现方式。
使用该方式实现需要用户手动处理相机的生命周期，因此需要在flutter端监听对应的方法，可以通过混入方式with WidgetsBindingObserver实现，重写didChangeAppLifecycleState方法，代码如下：

@override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.inactive: //前后台切换都执行
        break;
      case AppLifecycleState.paused: //前台到后台
        //需处理onPaused需知执行的，即相机资源释放
        _scanViewController.closeAutoFlash();
        setState(() {
          _clickBool = !_clickBool;
        });
        if (ModalRoute.of(context).isCurrent) {
          _scanViewController.stopScan();
        }
        break;
      case AppLifecycleState.resumed: //后台到前台
      //需处理onResumed需知执行的，即相机资源重新获取
        if (ModalRoute.of(context).isCurrent) {
          _scanViewController.restartScan();
        }
        break;
      case AppLifecycleState.suspending:
        break;
    }
    super.didChangeAppLifecycleState(state);
  }

flutter端绘制的界面

二 native端实现的页面：

默认二维码扫描界面CaptureActivity
二维码的扫描结果通过Intent返回出来：
XQRCode.RESULT_TYPE:扫描结果类型，XQRCode.RESULT_SUCCESS代表扫描成功，XQRCode.RESULT_FAILED代表扫描失败。
XQRCode.RESULT_DATA:扫描二维码的数据内容。

   Activity activity = (Activity) mContext;
      Intent intent = new Intent(activity, CaptureActivity.class);
      intent.putExtra(KEY_CAPTURE_THEME, R.style.XQRCodeTheme);
      activity.startActivityForResult(intent, REQUEST_CODE);
/**
 * 处理二维码扫描结果
 * @param data
 */
private void handleScanResult(Intent data) {
    if (data != null) {
        Bundle bundle = data.getExtras();
        if (bundle != null) {
            if (bundle.getInt(XQRCode.RESULT_TYPE) == XQRCode.RESULT_SUCCESS) {
                String result = bundle.getString(XQRCode.RESULT_DATA);
                ToastUtils.toast("解析结果:" + result, Toast.LENGTH_LONG);
            } else if (bundle.getInt(XQRCode.RESULT_TYPE) == XQRCode.RESULT_FAILED) {
                ToastUtils.toast("解析二维码失败", Toast.LENGTH_LONG);
            }
        }
    }
}

自定义二维码扫描界面

（1）自定义一个扫码界面布局。自定义的扫码界面需要定义一个SurfaceView和一个ViewfinderView，且id必须是preview_view和viewfinder_view。详情见如下布局代码：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <SurfaceView
        android:id="@+id/preview_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <flutterqrcode.lizaihao.qr_code_flutter_plugin.view.ViewfinderView
        android:id="@+id/viewfinder_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:inner_corner_color="@color/scan_corner_color"
        app:inner_corner_length="30dp"
        app:inner_corner_width="5dp"
        app:inner_marginTop="120dp"
        app:inner_scan_bitmap="@mipmap/ic_scan_image"
        app:inner_scan_isCircle="false"
        app:inner_scan_speed="10"
        app:inner_height="300dp"
        app:inner_width="300dp" />

</FrameLayout>

（2）调用XQRCode.getCaptureFragment的方法，传入自定义扫描界面的布局ID，可以获得带扫描功能的Fragment-CaptureFragment，将其填充到页面中。

// 为二维码扫描界面设置定制化界面
CaptureFragment captureFragment = XQRCode.getCaptureFragment(R.layout.layout_custom_camera);
captureFragment.setAnalyzeCallback(analyzeCallback);
getChildFragmentManager().beginTransaction().replace(R.id.fl_my_container, captureFragment).commit();

（3）最后为CaptureFragment设置二维码解析回调接口AnalyzeCallback即可。