Flutter 最佳扫码插件——自定义视图

短命女 2022-09-11 05:17 421阅读 0赞

之前封装了Flutter扫码插件后，许多人希望能提供自定义视图的支持，于是将[flutter\_scankit][flutter_scankit] 升级到v1.2。关于该插件的介绍以及基础用法，请查看上一篇[《Flutter 最佳扫码插件》][Flutter]

## 自定义视图 ##

使用插件库提供的`ScanKitWidget`作为扫码控件，建议用`Stack`布局组合其他控件实现自定义视图。

在创建`ScanKitWidget`时，必须实现其回调函数`callback`，该回调返回一个`ScanKitController`，用于调用与扫码相关的功能。

ScanKitWidget(
                   callback: (controller) {
                     _controller = controller;
                   },
    	)

创建`ScanKitWidget`时，还有一些属性可以设置：

*  `boundingBox`：设置识码区域的位置大小
 *  `format`：指定扫码的类型，不传默认为全部类型，与 [startScan][]方法`scanTypes`参数相同，参考[startScan][]
 *  `continuouslyScan`：设置是否为连续扫码模式

以上属性的解释，可参考HUAWEI ScanKit 的 [官方文档][Link 1]。

`ScanKitController`中包含如下方法：

*  `getLightStatus()`：当前闪光灯是否开启
 *  `switchLight()`：切换闪光灯（on/off）
 *  `pickPhoto()`：拉起图库，从图片识别二维码
 *  `dispose()`
 *  `pauseContinuouslyScan()`
 *  `resumeContinuouslyScan()`

需要注意的是，`pauseContinuouslyScan()`和`resumeContinuouslyScan()`仅Android平台支持，关于这两个方法的说明，请查看 [这里][Link 2]

另外，`ScanKitController`的`onLightVisible`属性也是仅Android平台支持，它是判断环境光亮明暗的监听，返回值为布尔类型，`true`表示场景昏暗；`false`表示场景明亮。开发者可通过该监听实现自动开启闪光灯功能。

### 获取识码结果 ###

监听`ScanKitController`的`onResult`属性

ScanKitWidget(
                    callback: (controller) {
                      _controller = controller;
    
                      controller.onResult.listen((result) {
                      		debugPrint("scanning result:$result");
                      });
            },

## 完整示例 ##

实现自定义视图：

class CustomizedView extends StatefulWidget {
      @override
      _CustomizedViewState createState() => _CustomizedViewState();
    }
    
    const boxSize = 200.0;
    
    class _CustomizedViewState extends State<CustomizedView> {
      late ScanKitController _controller;
    
      final screenWidth = window.physicalSize.width;
      final screenHeight = window.physicalSize.height;
      
      @override
      void dispose(){
        _controller.dispose();
       super.dispose(); 
      }
    
      @override
      Widget build(BuildContext context) {
        var pixelSize = boxSize * window.devicePixelRatio;
        var left = screenWidth/2 - pixelSize/2;
        var top = screenHeight/2 - pixelSize/2;
        var right = screenWidth/2 + pixelSize/2;
        var bottom = screenHeight/2 + pixelSize/2;
        var rect = Rect.fromLTRB(left, top, right, bottom);
    
        return Scaffold(
          body: SafeArea(
            child: Stack(
              children: [
                ScanKitWidget(
                    callback: (controller) {
                      _controller = controller;
    
                      controller.onResult.listen((result) {
                        debugPrint("scanning result:$result");
    
                        Navigator.of(context).pop(result);
                      });
                    },
                  continuouslyScan: false,
                  boundingBox: rect),
                Align(
                  alignment: Alignment.topCenter,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      IconButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          icon: Icon(
                            Icons.arrow_back,
                            color: Colors.white,
                            size: 28,
                          )),
                      IconButton(
                          onPressed: () {
                            _controller.switchLight();
                          },
                          icon: Icon(
                            Icons.lightbulb_outline_rounded,
                            color: Colors.white,
                            size: 28,
                          )),
                      IconButton(
                          onPressed: () {
                            _controller.pickPhoto();
                          },
                          icon: Icon(
                            Icons.picture_in_picture_rounded,
                            color: Colors.white,
                            size: 28,
                          ))
                    ],
                  ),
                ),
    
                Align(
                  alignment: Alignment.center,
                  child: Container(
                    width: boxSize,
                    height: boxSize,
                    decoration: BoxDecoration(
                      border: Border(
                          left: BorderSide(color: Colors.orangeAccent, width: 2),
                          right: BorderSide(color: Colors.orangeAccent, width: 2),
                          top: BorderSide(color: Colors.orangeAccent, width: 2),
                          bottom: BorderSide(color: Colors.orangeAccent, width: 2)),
                    ),
                  ),
                )
              ],
            ),
          ),
        );
      }
    }

拉起自定义视图：

Future<void> newPage(BuildContext context) async {
        var code = await Navigator.of(context).push(MaterialPageRoute(
            builder: (BuildContext context) {
              return CustomizedView();
            }
        ));
    
        setState(() {
          this.code = code ?? "";
        });
      }

完整代码参见 [Example][]

## 视频课程 ##

希望系统学习Flutter应用开发，可以参加[我的网校][Link 3]中的 [《Flutter 全栈式开发指南》][Flutter 1]课程。

想学习Flutter插件开发，在[我的网校][Link 3]中查看[《Flutter全栈式开发-高级篇》][Flutter_-]课程，从零开始插件开发，包含Android/iOS原生基础，全网独家深入解析关于Flutter插件开发的方方面面，实战讲解多个案例（包含本插件开发过程）

![qr\_adv][qr_adv]

## 欢迎关注公众号：编程之路从0到1 ##

![编程之路从0到1][0_1]

[flutter_scankit]: https://pub.flutter-io.cn/packages/flutter_scankit
[Flutter]: https://arcticfox.blog.csdn.net/article/details/116238958
[startScan]: https://pub.flutter-io.cn/documentation/flutter_scankit/latest/flutter_scankit/FlutterScankit/startScan.html
[Link 1]: https://developer.huawei.com/consumer/cn/doc/development/HMSCore-References/scan-remoteviewbuilder4-0000001050165770
[Link 2]: https://developer.huawei.com/consumer/cn/doc/development/HMSCore-References/scan-remoteview4-0000001050167711#section1967611529917
[Example]: https://github.com/arcticfox1919/flutter-scankit/tree/main/example/lib
[Link 3]: http://m.study.163.com/provider/480000001855430/index.htm?share=2&shareId=480000001855430
[Flutter 1]: https://study.163.com/course/courseMain.htm?courseId=1210111872&share=2&shareId=480000001855430
[Flutter_-]: https://study.163.com/course/courseMain.htm?courseId=1211268802&share=2&shareId=480000001855430
[qr_adv]: /images/20220828/44e95f50344a49dc8e77d4bba049055e.png
[0_1]: /images/20220828/b81e6dffb40a4ac189d3641a5e8196ec.png