flutter(android)掃二維碼實(shí)現(xiàn)詳解

項(xiàng)目 QRCodeFlutterPlugin

一個(gè)非常方便實(shí)用的二維碼掃描、解析庫(kù),包含flutter端統(tǒng)一繪制頁(yè)面,也包含native端各自繪制頁(yè)面的實(shí)現(xiàn)方式膏蚓。
項(xiàng)目demo apk
項(xiàng)目源碼

已實(shí)現(xiàn)功能

  • flutter 端統(tǒng)一繪制頁(yè)面,相機(jī)和本地相冊(cè)識(shí)別的二維碼
  • native端單獨(dú)繪制的頁(yè)面畸写,實(shí)現(xiàn)的相機(jī)識(shí)別二維碼
  • native端單自定義樣式的頁(yè)面驮瞧,實(shí)現(xiàn)的相機(jī)識(shí)別二維碼
  • native 本地圖片二維碼識(shí)別

TODO

  • 二維碼生成
  • 二維碼帶logo生成
  • 條形碼生成
  • 條形碼識(shí)別包含本地圖片和相機(jī)識(shí)別
  • iOS端實(shí)現(xiàn)

一 flutter 端統(tǒng)一實(shí)現(xiàn)的頁(yè)面:

使用flutter PlatformView去實(shí)現(xiàn),Android 端AndroidView枯芬,iOS端UiKitView论笔。這種view方式實(shí)現(xiàn)可以參考網(wǎng)上的實(shí)現(xiàn)方式。
使用該方式實(shí)現(xiàn)需要用戶手動(dòng)處理相機(jī)的生命周期破停,因此需要在flutter端監(jiān)聽(tīng)對(duì)應(yīng)的方法翅楼,可以通過(guò)混入方式with WidgetsBindingObserver實(shí)現(xiàn),重寫didChangeAppLifecycleState方法真慢,代碼如下:

@override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.inactive: //前后臺(tái)切換都執(zhí)行
        break;
      case AppLifecycleState.paused: //前臺(tái)到后臺(tái)
        //需處理onPaused需知執(zhí)行的毅臊,即相機(jī)資源釋放
        _scanViewController.closeAutoFlash();
        setState(() {
          _clickBool = !_clickBool;
        });
        if (ModalRoute.of(context).isCurrent) {
          _scanViewController.stopScan();
        }
        break;
      case AppLifecycleState.resumed: //后臺(tái)到前臺(tái)
      //需處理onResumed需知執(zhí)行的,即相機(jī)資源重新獲取
        if (ModalRoute.of(context).isCurrent) {
          _scanViewController.restartScan();
        }
        break;
      case AppLifecycleState.suspending:
        break;
    }
    super.didChangeAppLifecycleState(state);
  }
flutter端繪制的界面

二 native端實(shí)現(xiàn)的頁(yè)面:

  1. 默認(rèn)二維碼掃描界面CaptureActivity
    二維碼的掃描結(jié)果通過(guò)Intent返回出來(lái):
    XQRCode.RESULT_TYPE:掃描結(jié)果類型黑界,XQRCode.RESULT_SUCCESS代表掃描成功管嬉,XQRCode.RESULT_FAILED代表掃描失敗。
    XQRCode.RESULT_DATA:掃描二維碼的數(shù)據(jù)內(nèi)容朗鸠。
   Activity activity = (Activity) mContext;
      Intent intent = new Intent(activity, CaptureActivity.class);
      intent.putExtra(KEY_CAPTURE_THEME, R.style.XQRCodeTheme);
      activity.startActivityForResult(intent, REQUEST_CODE);
/**
 * 處理二維碼掃描結(jié)果
 * @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("解析結(jié)果:" + result, Toast.LENGTH_LONG);
            } else if (bundle.getInt(XQRCode.RESULT_TYPE) == XQRCode.RESULT_FAILED) {
                ToastUtils.toast("解析二維碼失敗", Toast.LENGTH_LONG);
            }
        }
    }
}
  1. 自定義二維碼掃描界面

(1)自定義一個(gè)掃碼界面布局蚯撩。自定義的掃碼界面需要定義一個(gè)SurfaceView和一個(gè)ViewfinderView,且id必須是preview_view和viewfinder_view烛占。詳情見(jiàn)如下布局代碼:

<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)調(diào)用XQRCode.getCaptureFragment的方法胎挎,傳入自定義掃描界面的布局ID沟启,可以獲得帶掃描功能的Fragment-CaptureFragment,將其填充到頁(yè)面中犹菇。

// 為二維碼掃描界面設(shè)置定制化界面
CaptureFragment captureFragment = XQRCode.getCaptureFragment(R.layout.layout_custom_camera);
captureFragment.setAnalyzeCallback(analyzeCallback);
getChildFragmentManager().beginTransaction().replace(R.id.fl_my_container, captureFragment).commit();

(3)最后為CaptureFragment設(shè)置二維碼解析回調(diào)接口AnalyzeCallback即可德迹。

2.1、二維碼解析

  1. 只需要解析二維碼攜帶的數(shù)據(jù)內(nèi)容揭芍,可直接調(diào)用XQRCode.analyzeQRCode方法胳搞,傳入二維碼的絕對(duì)路徑即可。

  2. 如果需要完整的二維碼解析結(jié)果称杨,可調(diào)用XQRCode.getAnalyzeQRCodeResult方法肌毅,傳入二維碼的絕對(duì)路徑即可。


    native端實(shí)現(xiàn)的頁(yè)面

特別感謝

https://github.com/yipianfengye/android-zxingLibrary

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末姑原,一起剝皮案震驚了整個(gè)濱河市悬而,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌页衙,老刑警劉巖摊滔,帶你破解...
    沈念sama閱讀 221,695評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異店乐,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)呻袭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門眨八,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人左电,你說(shuō)我怎么就攤上這事廉侧。” “怎么了篓足?”我有些...
    開封第一講書人閱讀 168,130評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵绘趋,是天一觀的道長(zhǎng)汹买。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么姨涡? 我笑而不...
    開封第一講書人閱讀 59,648評(píng)論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮埋虹,結(jié)果婚禮上侵贵,老公的妹妹穿的比我還像新娘。我一直安慰自己贴彼,他們只是感情好潜腻,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著器仗,像睡著了一般融涣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,268評(píng)論 1 309
  • 那天威鹿,我揣著相機(jī)與錄音妓盲,去河邊找鬼。 笑死专普,一個(gè)胖子當(dāng)著我的面吹牛悯衬,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播檀夹,決...
    沈念sama閱讀 40,835評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼筋粗,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了炸渡?” 一聲冷哼從身側(cè)響起娜亿,我...
    開封第一講書人閱讀 39,740評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蚌堵,沒(méi)想到半個(gè)月后买决,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,286評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡吼畏,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評(píng)論 3 340
  • 正文 我和宋清朗相戀三年督赤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泻蚊。...
    茶點(diǎn)故事閱讀 40,505評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡躲舌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出性雄,到底是詐尸還是另有隱情没卸,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布秒旋,位于F島的核電站约计,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏迁筛。R本人自食惡果不足惜煤蚌,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瑰煎。 院中可真熱鬧铺然,春花似錦、人聲如沸酒甸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)插勤。三九已至沽瘦,卻和暖如春革骨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背析恋。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工良哲, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人助隧。 一個(gè)月前我還...
    沈念sama閱讀 48,921評(píng)論 3 376
  • 正文 我出身青樓筑凫,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親并村。 傳聞我的和親對(duì)象是個(gè)殘疾皇子巍实,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • Flutter & Native 混合開發(fā) 項(xiàng)目集成方案 問(wèn)題 項(xiàng)目中仍有大量業(yè)務(wù)使用 Native 開發(fā)。項(xiàng)目引...
    AiLearn閱讀 2,055評(píng)論 0 3
  • 二維碼掃描已經(jīng)是移動(dòng)app中很常見(jiàn)的功能了哩牍,原生端實(shí)現(xiàn)掃碼是非常簡(jiǎn)單的事棚潦,Android一般使用ZXing庫(kù)來(lái)實(shí)現(xiàn)...
    不變旋律閱讀 24,374評(píng)論 8 35
  • 原創(chuàng)作品 侵權(quán)必究 ——《心靈風(fēng)痕》系列散文之五 文/劍厚 大哥,不是我的親大哥...
    卓青老師法律咨詢閱讀 945評(píng)論 2 5
  • 一個(gè)男人在家里处窥,要么給愛(ài)嘱吗,要么給錢,要么滾滔驾,哈哈,一段視頻俄讹,太精辟了 試了試視頻傳不上簡(jiǎn)書啊哆致,這句話應(yīng)該是每一個(gè)女...
    海燕姐姐閱讀 845評(píng)論 0 0
  • 背景 最近app項(xiàng)目ios&&android項(xiàng)目上線,我的初衷是為了讓大家一起提高編碼質(zhì)量患膛,當(dāng)然從無(wú)到有的過(guò)程是痛...
    Boom妒忌噶閱讀 207評(píng)論 0 1