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

傷城~ 2023-01-10 11:50 186阅读 0赞

![a30f4fe187e54da2cf2589c96b4c6020.png][]

#### 前言 ####

--------------------

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

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

[Android部分：zxing-android-embedded][Android_zxing-android-embedded]  
[iOS部分：ZFScan][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**。如下图所示。

![65ec8d501a3d53566409e82434c821e0.png][]

打开 Workspace Settings ，然后设置 **build System** 为 **Legacy Build System**。

![104d04972264d6c8bcac02b790cf8b80.png][]

然后我们需要在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对象即可。这里把可配置选项说明一下，如下所示。

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

具体效果如下所示。

![a19a952605b31195e8812c176fab815d.gif][]

#### 结语 ####

--------------------

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

![1cc773b3510614b54c92ffc3dc40d24a.gif][]

[a30f4fe187e54da2cf2589c96b4c6020.png]: /images/20221119/f976263f0a5c4f1cb11bbf7465041c1b.png
[Android_zxing-android-embedded]: https://github.com/journeyapps/zxing-android-embedded
[iOS_ZFScan]: https://github.com/Zirkfied/ZFScan
[65ec8d501a3d53566409e82434c821e0.png]: /images/20221119/884a1732b35441da966713228e0870fe.png
[104d04972264d6c8bcac02b790cf8b80.png]: https://img-blog.csdnimg.cn/img_convert/104d04972264d6c8bcac02b790cf8b80.png
[a19a952605b31195e8812c176fab815d.gif]: https://img-blog.csdnimg.cn/img_convert/a19a952605b31195e8812c176fab815d.gif
[1cc773b3510614b54c92ffc3dc40d24a.gif]: https://img-blog.csdnimg.cn/img_convert/1cc773b3510614b54c92ffc3dc40d24a.gif