SDScan:Flutter二维码扫描界面太丑?看这里就够了。

前言


这段时间一直在写Flutter的一个项目,作为一个才入门Flutter的小白,遇到的坑是多之又多,近来想做个二维码扫描界面。看了看网上常用的三方库,真心觉得UI简直不要太简陋,所以自己决定动手撸一个Flutter插件,简单实现一下。当然了,由于Android和Flutter的基础太差,可能会有很多Bug的存在,如果各位大佬有看到不符合规范的地方,欢迎指导批评。

参考库如下所示。安卓部分是基于 zxing-android-embedded 这个库,iOS是参考 ZFScan 改造的。

Android部分:zxing-android-embedded
iOS部分:ZFScan


简单上手


首先我们在 pubspec.yaml 文件中导入下面内容。然后再执行 flutter pub get 命令。


dependencies:
  flutter_dong_scan: ^1.0.6

同时,我们需要把项目中build.gradle的minSdkVersion设置为19.

android {
    ...
    defaultConfig {
        minSdkVersion 19
        ...
    }
}

对于iOS部分,由于插件本身有图片资源,所以我们需要改动下我们的 build System

打开Xcode,然后从菜单栏中找到 File → Workspace Settings。如下图所示。

打开 Workspace Settings ,然后设置 build SystemLegacy Build System

然后我们需要在Android的 AndroidManifest.xml 和 iOS 的 info.plist 添加权限请求, 具体如下所示。

这里要说明一下iOS部分添加权限需要注意的问题,如果你的App想要上线AppStore,我建议你把 “该Demo想使用您的相机” 这句话改为更加详细的阐述,不然挨拒那是必然的。UIViewControllerBasedStatusBarAppearance 这个属性为什么要设置,这里我需要说明下,我为UI的统一把状态栏前景色改为白色,所以需要设置这个属性,可以不设置跟随整体主色走。

Android 部分
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.FLASHLIGHT" />
    <uses-permission android:name="android.permission.CAMERA" />

    <application>
        .....
    </application>

</manifest>
iOS部分

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>NSCameraUsageDescription</key>
    <string>该Demo想使用您的相机</string>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>

    ......

</dict>
</plist>

上面配置完成之后,我们导入SDScan,如下所示。


import 'package:flutter_dong_scan/scan.dart';

然后我们就可以如下进行调用了。

      ScanConfig scanConfig = ScanConfig();
      SDScan scan = SDScan().setScanEventListener((dynamic codeString){
          print("扫描结果:" + codeString);
      });
      scan.startScan(config: scanConfig);

那么我们想定制我们自己的UI该怎么办呢?我们只需要配置ScanConfig对象即可。这里把可配置选项说明一下,如下所示。

属性 说明 默认值
maskColorAlpha 外部遮罩的透明度,暂不可用 0.3
maskRatio 遮罩框相对比例 0.68
returnStyle 返回按钮的样式,ReturnStyleExit(值为0) ReturnStyleCancle(值为1) 0
titeColor 整体的主色,会影响扫描线和四个边角的颜色 "#4bde2b"
title 标题的文字 "扫一扫"
hintString 底部提示文字 "将二维码放入框内,即可自动扫描"

具体效果如下所示。


结语


OK,简单实用就说到这里啦,如果有任何问题或者想要功能改进,欢迎给骚栋留言,感谢。


推荐阅读更多精彩内容