基于Flutter的跨平臺(tái)實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)開發(fā)

倪紅軍，周巧扣

（南京師范大學(xué)泰州學(xué)院，江蘇泰州 225300）

0 引言

實(shí)驗(yàn)室是高校和科研院所承擔(dān)實(shí)踐教學(xué)任務(wù)和開展科學(xué)研究工作的重要場(chǎng)所［1］。近年來，屢見不鮮的實(shí)驗(yàn)室安全事故不僅影響了實(shí)驗(yàn)教學(xué)和科研工作的順利開展，而且影響了實(shí)驗(yàn)室周邊環(huán)境的安全與穩(wěn)定［2］，加強(qiáng)實(shí)驗(yàn)室安全學(xué)習(xí)教育刻不容緩。隨著移動(dòng)互聯(lián)技術(shù)的發(fā)展，大多數(shù)高校的實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)開始從傳統(tǒng)的PC 端Web 網(wǎng)站向移動(dòng)端APP 轉(zhuǎn)變。目前，原生開發(fā)一個(gè)移動(dòng)端APP 至少需要搭建Android 和iOS 平臺(tái)兩種開發(fā)環(huán)境，使用兩種計(jì)算機(jī)語言構(gòu)建和發(fā)布程序，而每個(gè)平臺(tái)單獨(dú)構(gòu)建和發(fā)布程序的工作量均較為龐大，上線后運(yùn)行維護(hù)成本高［3-4］。

跨平臺(tái)一直都是應(yīng)用開發(fā)者追求的終極目標(biāo)，從最早的Cordova 到現(xiàn)在的Flutter，目前已有很多跨平臺(tái)框架技術(shù)可供開發(fā)者選用。2018 年，谷歌主持研發(fā)了開源的Flutter1.0 框架，其創(chuàng)建跨平臺(tái)高性能移動(dòng)APP 的特性受到廣泛青睞［5］。本文基于Flutter 開發(fā)框架和操作SQLite 數(shù)據(jù)庫(kù)的sqflite 插件，設(shè)計(jì)開發(fā)一個(gè)針對(duì)性強(qiáng)、使用方便靈活、高效通用的實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)，以期有效提高學(xué)習(xí)者的實(shí)驗(yàn)室安全防范意識(shí)和實(shí)驗(yàn)安全操作技能。

1 Flutter開發(fā)框架

Flutter開發(fā)框架提供了一套采用Dart語言實(shí)現(xiàn)基礎(chǔ)代碼的軟件開發(fā)工具包，開發(fā)者只需使用Dart 語言代碼庫(kù)便可以高效構(gòu)建移動(dòng)端、Web 端和嵌入式平臺(tái)的應(yīng)用程序。針對(duì)移動(dòng)端，F(xiàn)lutter 提供了Android 平臺(tái)的Material 風(fēng)格組件和iOS 平臺(tái)的Cupertino 風(fēng)格組件，同時(shí)又針對(duì)不同平臺(tái)進(jìn)行了兼容處理，更好地保留了平臺(tái)特性，使開發(fā)者編寫的一套程序代碼既能在iOS 平臺(tái)上運(yùn)行，又能在Android 平臺(tái)上運(yùn)行。Flutter 開發(fā)框架主要由框架層（Framework）、引擎層（Engine）和嵌入層（Embedder）3 個(gè)結(jié)構(gòu)層組成，具體如圖1所示。

Fig.1 Flutter frame structure圖1 Flutter框架結(jié)構(gòu)

Framework 提供了一套使用Dart 語言開發(fā)的基礎(chǔ)庫(kù)，包括Material 和Cupertino 風(fēng)格的Widget、手勢(shì)、繪圖和動(dòng)畫等組件。Engine 采用C++編寫，實(shí)現(xiàn)了Flutter 的核心庫(kù)，包括Dart 虛擬機(jī)、動(dòng)畫和圖形、文字渲染等。渲染采用2D 圖形渲染庫(kù)Skia，虛擬機(jī)采用面向?qū)ο笳Z言的Dart VM，并將它們托管至平臺(tái)的Embedder 層。渲染引擎依靠跨平臺(tái)的Skia 圖形庫(kù)實(shí)現(xiàn)，依賴系統(tǒng)的只有圖形繪制相關(guān)接口，可最大程度地保證不同平臺(tái)、不同設(shè)備體驗(yàn)的一致性。邏輯處理使用支持預(yù)編譯（Ahead-Of-Time，AOT）的Dart 語言，執(zhí)行效率比其他跨平臺(tái)開發(fā)框架采用的JavaScript 高出很多。Embedder 為系統(tǒng)平臺(tái)適配層，用于實(shí)現(xiàn)渲染Surface設(shè)置、線程設(shè)置和原生插件等平臺(tái)相關(guān)性適配［6-7］。

2 跨平臺(tái)實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)設(shè)計(jì)

學(xué)校在專門的網(wǎng)站上分別提供Android 平臺(tái)和iOS 平臺(tái)的實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)APP 下載鏈接，實(shí)驗(yàn)室人員采用手機(jī)或其他終端設(shè)備系統(tǒng)下載、安裝相應(yīng)APP 后可以選擇需要學(xué)習(xí)的內(nèi)容。學(xué)習(xí)完成后選擇模擬測(cè)試，測(cè)試完成后可以查看評(píng)分和試題解析，以便進(jìn)一步鞏固復(fù)習(xí)實(shí)驗(yàn)室安全知識(shí)要點(diǎn)，提高學(xué)習(xí)效果。

2.1 平臺(tái)功能

實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)包括安全教育題庫(kù)、學(xué)習(xí)和測(cè)試、查看題目解析3個(gè)模塊，結(jié)構(gòu)如圖2所示。

Fig.2 Platform structure圖2 平臺(tái)結(jié)構(gòu)

（1）安全教育題庫(kù)。高校通常建有多學(xué)科不同類型的實(shí)驗(yàn)室，實(shí)驗(yàn)室人員需要掌握的安全知識(shí)不盡相同。目前國(guó)內(nèi)高校常見的實(shí)驗(yàn)室安全教育內(nèi)容包括通識(shí)類、化學(xué)類、醫(yī)學(xué)生物類、機(jī)械建筑類、電氣類、輻射類、特種設(shè)備類和消防類，該平臺(tái)構(gòu)建了相應(yīng)8 個(gè)類型的安全教育題庫(kù)供學(xué)習(xí)者選擇。

（2）學(xué)習(xí)和測(cè)試。為增強(qiáng)安全知識(shí)學(xué)習(xí)的趣味性、提高學(xué)習(xí)效率，每種類型的題庫(kù)都包含選擇題和判斷題兩種題型供學(xué)習(xí)者邊學(xué)習(xí)邊測(cè)試，且兩種題型之間可以自由切換，操作方便快捷。

（3）查看題目解析。為了便于學(xué)習(xí)者更好地鞏固復(fù)習(xí)學(xué)習(xí)內(nèi)容、提升安全操作技能，在邊學(xué)習(xí)邊測(cè)試的過程中，學(xué)習(xí)者可以隨時(shí)查看每道題目的標(biāo)準(zhǔn)答案和詳細(xì)解析。

2.2 數(shù)據(jù)庫(kù)設(shè)計(jì)

SQLite 是一個(gè)嵌入式輕量級(jí)關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，sqflite 是基于SQLite 開發(fā)的一款Flutter 插件，同時(shí)支持iOS和Android 平臺(tái)，在Android、iOS 系統(tǒng)后臺(tái)線程中執(zhí)行數(shù)據(jù)庫(kù)操作，并且只占用很少內(nèi)存［8-9］。根據(jù)實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)的功能組成和實(shí)驗(yàn)室人員需要掌握的安全知識(shí)，本文設(shè)計(jì)的SQLite 數(shù)據(jù)庫(kù)中包括通識(shí)類、化學(xué)類、醫(yī)學(xué)生物類、機(jī)械建筑類、電氣類、輻射類、特種設(shè)備類和消防類8 個(gè)不同類別的安全教育知識(shí)題庫(kù)表，每個(gè)題庫(kù)表包含題目編號(hào)、題目?jī)?nèi)容、選項(xiàng)A、選項(xiàng)B、選項(xiàng)C、選項(xiàng)D、題型、標(biāo)準(zhǔn)答案及解析等字段，具體表結(jié)構(gòu)如表1所示。

Table 1 Question bank table structure表1 題庫(kù)表結(jié)構(gòu)

3 跨平臺(tái)實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)實(shí)現(xiàn)

實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)將安全知識(shí)題庫(kù)以資源文件的形式保存在數(shù)據(jù)庫(kù)文件存儲(chǔ)目錄中，然后結(jié)合sqfliter 插件實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的訪問。在所有頁面設(shè)計(jì)和功能實(shí)現(xiàn)后，將在Android Studio 作為開發(fā)工具搭建的Flutter 項(xiàng)目開發(fā)環(huán)境下編寫好的源代碼分別打包成可以直接運(yùn)行在Android和iOS平臺(tái)上的APP。

3.1 數(shù)據(jù)源準(zhǔn)備

實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)的題庫(kù)內(nèi)容可以采用Excel 按照題庫(kù)的表結(jié)構(gòu)格式進(jìn)行整理編輯，然后采用專門管理SQLite 數(shù)據(jù)庫(kù)的軟件（如SQLiteStudio）將Excel 表格式的題庫(kù)內(nèi)容轉(zhuǎn)換為SQLite 格式的數(shù)據(jù)庫(kù)文件。該數(shù)據(jù)庫(kù)文件是實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)APP 運(yùn)行時(shí)的數(shù)據(jù)源文件，因此需要將其包含在APP 的安裝包中，APP 安裝時(shí)會(huì)自動(dòng)將該文件復(fù)制到手機(jī)或其他終端設(shè)備的指定位置。首先在Flutter 項(xiàng)目配置文件pubspec.yaml 中聲明數(shù)據(jù)庫(kù)文件和操作SQLite 數(shù)據(jù)庫(kù)的sqfliter 插件，然后采用異步方式從存放數(shù)據(jù)庫(kù)文件處讀取文件內(nèi)容，待數(shù)據(jù)庫(kù)內(nèi)容寫入默認(rèn)存放位置后，便可以調(diào)用openDatabase（）方法打開數(shù)據(jù)庫(kù)文件，實(shí)現(xiàn)對(duì)題庫(kù)數(shù)據(jù)庫(kù)文件的訪問。

3.2 題庫(kù)選擇頁面實(shí)現(xiàn)

實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)APP 啟動(dòng)后，首先加載如圖3（彩圖掃OSID 碼可見，下同）所示的題庫(kù)選擇頁面，學(xué)習(xí)者單擊某個(gè)需要學(xué)習(xí)的實(shí)驗(yàn)室安全知識(shí)題庫(kù)名稱后，系統(tǒng)便可以將數(shù)據(jù)庫(kù)文件名稱和對(duì)應(yīng)的安全知識(shí)題庫(kù)編號(hào)作為參數(shù)傳遞給學(xué)習(xí)與測(cè)試頁面，以便加載對(duì)應(yīng)的安全知識(shí)題庫(kù)內(nèi)容。題庫(kù)選擇頁面上的每個(gè)安全知識(shí)題庫(kù)名稱按鈕和退出系統(tǒng)按鈕均采用Flutter 開發(fā)框架中的FlatButton 組件實(shí)現(xiàn)，通過該組件的color 屬性設(shè)置按鈕顏色、onPressed 屬性設(shè)置單擊事件，并采用GridView.count（）方法對(duì)其進(jìn)行封裝，以網(wǎng)格的方式顯示在頁面上。單擊每個(gè)按鈕切換到學(xué)習(xí)與測(cè)試頁面的操作采用Navigator 導(dǎo)航組件和Material-PageRoute 路由組件實(shí)現(xiàn)。

Fig.3 Question bank selection page圖3 題庫(kù)選擇頁面

3.3 學(xué)習(xí)與測(cè)試頁面實(shí)現(xiàn)

圖4 為學(xué)習(xí)與測(cè)試頁面，學(xué)習(xí)者單擊上一題、下一題按鈕可以更新題目?jī)?nèi)容，單擊查看解析按鈕后系統(tǒng)會(huì)將當(dāng)前試題的標(biāo)準(zhǔn)答案和答案解析顯示出來。由于學(xué)習(xí)與測(cè)試頁面上顯示的內(nèi)容會(huì)根據(jù)學(xué)習(xí)者的操作而發(fā)生變化，該頁面對(duì)應(yīng)的類需繼承自StatefulWidget 有狀態(tài)組件類。題庫(kù)中的每一類題目都包含判斷題和選擇題兩種題型，選擇題有4 個(gè)選項(xiàng)，而判斷題只有對(duì)和錯(cuò)兩個(gè)選項(xiàng)，因此需要分別創(chuàng)建顯示判斷題內(nèi)容的Widget 類型的jdetail 對(duì)象，以及顯示選擇題內(nèi)容的Widget 類型的sdetail 對(duì)象。為節(jié)省頁面空間，可以采用showModalBottomSheet（）方法從頁面底部彈出試題解析內(nèi)容。

學(xué)習(xí)與測(cè)試頁面的頂部導(dǎo)航標(biāo)簽包含判斷題和選擇題兩個(gè)選項(xiàng)，采用TabBar 組件顯示導(dǎo)航標(biāo)簽內(nèi)容，采用TabBarView 給導(dǎo)航標(biāo)簽對(duì)應(yīng)的頁面封裝內(nèi)容，采用DefaultTabController 組件實(shí)現(xiàn)導(dǎo)航標(biāo)簽與頁面內(nèi)容的聯(lián)動(dòng)控制。

4 實(shí)施效果分析

2020 年春季學(xué)期，南京師范大學(xué)泰州學(xué)院在資產(chǎn)與實(shí)驗(yàn)室管理處網(wǎng)站發(fā)布了實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)的Android 端和iOS 端APP 下載鏈接，校內(nèi)學(xué)生下載量達(dá)到5 000 余人次。2020 級(jí)新生進(jìn)校后，由各二級(jí)學(xué)院負(fù)責(zé)通知其在該平臺(tái)上參加實(shí)驗(yàn)室安全教育培訓(xùn)。2021 年1 月，2 600 名2020 級(jí)新生參加了實(shí)驗(yàn)室安全考試，一次性通過率達(dá)94.75%，比前一年提高了8.65%，說明該平臺(tái)切實(shí)提升了學(xué)生的實(shí)驗(yàn)室安全防范意識(shí)和安全操作技能水平。

Fig.4 Learning and testing page圖4 學(xué)習(xí)與測(cè)試頁面

5 結(jié)語

參加實(shí)驗(yàn)的人員進(jìn)入實(shí)驗(yàn)室前必須了解相關(guān)安全知識(shí)、掌握安全操作技能并具備風(fēng)險(xiǎn)防范意識(shí)。基于Flutter框架開發(fā)的跨平臺(tái)實(shí)驗(yàn)室安全學(xué)習(xí)平臺(tái)充分利用處處有網(wǎng)絡(luò)、人人有手機(jī)的現(xiàn)狀，使相關(guān)人員進(jìn)入實(shí)驗(yàn)室前都可以方便地下載安裝APP 學(xué)習(xí)鞏固實(shí)驗(yàn)室安全知識(shí)、提高實(shí)驗(yàn)室安全風(fēng)險(xiǎn)防范意識(shí)，為有效減少實(shí)驗(yàn)室安全事故發(fā)生、營(yíng)造良好的實(shí)驗(yàn)室安全文化氛圍創(chuàng)造了有利條件。然而由于該學(xué)習(xí)平臺(tái)基于本地?cái)?shù)據(jù)庫(kù)實(shí)現(xiàn)，安全教育題庫(kù)在安裝學(xué)習(xí)平臺(tái)APP 時(shí)以數(shù)據(jù)庫(kù)文件形式保存在移動(dòng)端存儲(chǔ)器中。如果安全教育題庫(kù)內(nèi)容升級(jí)更新，則需要學(xué)習(xí)者重新下載安裝學(xué)習(xí)平臺(tái)APP，這樣就會(huì)給學(xué)習(xí)者帶來不便。解決該問題需要在今后的平臺(tái)更新中開發(fā)Flutter 框架訪問網(wǎng)絡(luò)數(shù)據(jù)的技術(shù)，使移動(dòng)端APP 運(yùn)行時(shí)能自動(dòng)連接網(wǎng)絡(luò)并更新題庫(kù)內(nèi)容，確保學(xué)習(xí)者能隨時(shí)使用最新的題庫(kù)資源進(jìn)行學(xué)習(xí)和測(cè)試。