Flutter:快速創(chuàng)建簡(jiǎn)單閃屏頁(yè)

近來(lái)閑暇時(shí)間一直在做Flutter,閃屏頁(yè)是一個(gè)比較常見(jiàn)的需求,網(wǎng)上的閃屏頁(yè)教程大部分是那種類似于廣告頁(yè),而非iOS中的 LaunchScreen 性質(zhì)的閃屏頁(yè).按照原來(lái)的方案我們要配置閃屏頁(yè)的話,我們需要同時(shí)配置兩端的閃屏頁(yè),那么有沒(méi)有比較簡(jiǎn)單的方案來(lái)配置閃屏頁(yè)呢? 毋庸置疑,當(dāng)然是有了,那就是Flutter的插件 - flutter_native_splash . 接下來(lái)我們就來(lái)看一下具體應(yīng)該怎么使用這個(gè)插件.

創(chuàng)新互聯(lián)專業(yè)提供綿陽(yáng)主機(jī)托管服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購(gòu)買綿陽(yáng)主機(jī)托管服務(wù)，并享受7*24小時(shí)金牌售后服務(wù)。

首先把 flutter_native_splash 導(dǎo)入到工程的 pubspec.yaml 中.這里需要注意的是需要放在 dev_dependencies 下,而不是 dependencies .具體如下所示.

接下來(lái)我們就來(lái)配置 flutter_native_splash ,在配置之前我們看一下 flutter_native_splash 的可配置項(xiàng).

例如,我現(xiàn)在只有一個(gè)logo圖片,那么我想生成iOS和android兩端的閃屏頁(yè),這時(shí)候我只需在 pubspec.yaml 如下設(shè)置即可.

當(dāng)然了,如果你有其他配置可以自行進(jìn)行添加.

配置完成了,我們?cè)撊绾紊赡?這時(shí)候需要我們打開(kāi)終端 cd 到我們的工程目錄下.如果是Android Studio 或者 VSCode 默認(rèn)就是在當(dāng)前工程目錄下.

然后我們需要執(zhí)行下面的三個(gè)命令來(lái)生成閃屏頁(yè)

每一次都敲三個(gè)命令實(shí)屬麻煩,我們把上訴的三個(gè)命令整合成一個(gè)命令,如下所示.

那么,我們不想使用該插件生成的閃屏頁(yè)該怎么辦呢?我們只需要執(zhí)行下面命令即可.

注:每一次更換圖片都是需要重新執(zhí)行命令重新生成.

OK,上面就是關(guān)于 flutter_native_splash 的使用全部?jī)?nèi)容,其實(shí)比較簡(jiǎn)單,如果需要定制化的,建議還是各自平臺(tái)配置各自的閃屏頁(yè).如果有任何問(wèn)題歡迎在評(píng)論區(qū)批評(píng)指導(dǎo),感謝大家了.

Flutter 與 Unity 通信

Demo 通過(guò) flutter-unity-view-widget 庫(kù)，達(dá)到 Flutter 內(nèi)嵌 Unity 目的

主要功能：

無(wú)

uniapp內(nèi)嵌網(wǎng)頁(yè)發(fā)布成安卓

簡(jiǎn)單記錄一下：

背景是開(kāi)發(fā)周期太短，web端已經(jīng)開(kāi)發(fā)完成，但是來(lái)不及做安卓跟iOS端，leader想了下用網(wǎng)頁(yè)內(nèi)嵌應(yīng)付著先。后期可能會(huì)考慮用flutter重構(gòu)吧，這個(gè)到時(shí)再分享。

具體參考uniapp官網(wǎng)。

這里就只使用了一個(gè)webview標(biāo)簽。

另外由于使用場(chǎng)景是跟地圖相關(guān)，設(shè)置橫屏。

完事打包就行。

Flutter視頻播放器，簡(jiǎn)潔！

注：亮度調(diào)節(jié)和音量調(diào)節(jié)gif無(wú)法體現(xiàn)，功能是ok的，其次默認(rèn)Icon鎖的close和open實(shí)在難以分辨。

環(huán)境：Flutter 2.8.1 channel stable ;Dart 2.15.1

需要音頻播放器的看這里： Flutter音樂(lè)播放器

重點(diǎn)說(shuō)下這個(gè)工具類，因?yàn)橐曨l播放，涉及到狀態(tài)改變有很多，筆者剛開(kāi)始選擇使用 InheritedWidget 來(lái)在眾多的widget之間共享數(shù)據(jù)。但是總感覺(jué)這樣有點(diǎn)繁瑣，且不很優(yōu)雅！

這里非廣告，如果是使用 GetX 就很簡(jiǎn)單了，筆者也使用了 GetX 進(jìn)行封裝了，一瀉千里的趕腳！，但是筆者還是那句話：剛開(kāi)始接觸Flutter的開(kāi)發(fā)者不是很建議使用 GetX ，可以先熟悉下Flutter狀態(tài)管理的基礎(chǔ)原理再行使用。而且為了盡量簡(jiǎn)潔，還是不引入其他的第三方了。

我們選擇對(duì)第三方插件進(jìn)行封裝的目的不外乎這幾個(gè)：

于是筆者就寫(xiě)了一個(gè)工具類 VideoPlayerUtils ，專門且只用來(lái)處理播放器的所有業(yè)務(wù)。包括暫停、播放、跳轉(zhuǎn)、調(diào)節(jié)音量、調(diào)節(jié)亮度、切換視頻等操作。在所有的widget中不會(huì)引用關(guān)于 video_player 或其他第三方插件的任何信息， VideoPlayerUtils 負(fù)責(zé)widget與播放器之間的所有操作交互。后續(xù)優(yōu)化迭代或更換播放器插件時(shí)，只需針對(duì)這個(gè)工具類進(jìn)行修改，對(duì)所有widget不會(huì)有任何的影響，大大的解耦合了。

其中 VideoPlayerState ：

提供以上的公共屬性，可以通過(guò) VideoPlayerUtils 來(lái)獲取對(duì)應(yīng)的值，使用 get 只讀，使外界不會(huì)誤修改這些屬性，以保證數(shù)值的安全性。開(kāi)發(fā)者可根據(jù)自身需要自行添加屬性。

提供以上方法來(lái)處理播放器的所有業(yè)務(wù)。同樣的開(kāi)發(fā)者可根據(jù)自身需要自行添加或修改。

重點(diǎn)說(shuō)下這個(gè)方法，是整個(gè)業(yè)務(wù)的核心方法，控制視頻的播放或暫停。開(kāi)發(fā)者只要遇到播放或暫停是均可調(diào)用此方法，具體是播放或暫停，內(nèi)部根據(jù)傳入的 url 自行判斷，開(kāi)發(fā)者不需要關(guān)心。

切換新視頻也是使用此方法，傳入的 url 與上次不一致，自動(dòng)切換新視頻。筆者可根據(jù) statusListener 來(lái)監(jiān)聽(tīng)播放狀態(tài)的改變，以此處理自身邏輯。

這個(gè)也需要提下，視頻播放器在播放新視頻時(shí)會(huì)異步初始化，一般我們的操作是在 initState() 初始化，成功后再 setState() 。這里筆者遇到一個(gè)讓人蛋疼的問(wèn)題：

我們看 video_player 的使用：

VideoPlayer(controller) ：widget中已經(jīng)持有了controller。本來(lái)筆者封裝的目的就是為了讓widget與controller的之間解耦合。但此時(shí)的筆者。。。。

放棄不是不可能放棄的，這輩子都不會(huì)放棄的！

于是筆者取了巧，寫(xiě)了一個(gè)初始化監(jiān)聽(tīng)器 initializedListener ，包換2個(gè)參數(shù)： bool,Widget ，初始化是否成功；其中widget為初始化成功返回需要展示的播放器UI，失敗默認(rèn)返回 const SizedBox() 。

到這里就可以簡(jiǎn)單使用了：

沒(méi)看錯(cuò)，視頻播放就是這么簡(jiǎn)單。

如果有更多的業(yè)務(wù)功能，筆者也按照自己的需求寫(xiě)了一套，同樣的開(kāi)發(fā)者可根據(jù)自身需要自行添加或修改。

VideoPlayerGestures 主要是處理手勢(shì)的，比如快進(jìn)、快退等跳轉(zhuǎn)播放；左側(cè)上下滑動(dòng)調(diào)節(jié)亮度；右側(cè)上下滑動(dòng)調(diào)節(jié)音量；單擊是否開(kāi)啟沉浸式播放，所有widget的隱藏與顯示；雙擊播放、暫停等。

哦，還有 PercentageWidget 也放到這個(gè)文件下了，就是這玩意：

因?yàn)轱@示的百分比與手勢(shì)相關(guān)，隨著手勢(shì)移動(dòng)而更新。開(kāi)發(fā)者可自行處理。

筆者處出于簡(jiǎn)單考慮，就按照整個(gè)UI的位置命名了。瞅一眼就知道是啥玩意。

同樣的開(kāi)發(fā)者可根據(jù)自身需要自行添加或修改。

就是這玩意：

同樣的開(kāi)發(fā)者可根據(jù)自身需要自行添加或修改。話說(shuō)這個(gè)鎖的 Icon 的open和close是真的難分辨！

就是這玩意：

同樣的開(kāi)發(fā)者可根據(jù)自身需要自行添加或修改。

這玩意是自定義的，別問(wèn)，問(wèn)就是跟產(chǎn)品干一架落了下風(fēng)

主要就是自定義這玩意：

同樣的開(kāi)發(fā)者可根據(jù)自身需要自定義。

注：這里沒(méi)有添加緩沖的進(jìn)度，開(kāi)發(fā)可查看 video_player 中的源碼 VideoProgressIndicator ，按業(yè)務(wù)自行定義。

這玩意就是整合以上的widget，再考慮下全屏的安全區(qū)域，沒(méi)啥東西。開(kāi)發(fā)者可自行處理！

具體的實(shí)現(xiàn)監(jiān)聽(tīng)器的思路， 看這里 。

自此一個(gè)漂亮的Flutter視頻播放器就已經(jīng)結(jié)束了。如果您覺(jué)得對(duì)您有些許幫助的話，歡迎 Star ！

怎樣評(píng)價(jià)uni-app？

前端最火熱的話題無(wú)法就是flutter,不管是刷哪個(gè)論壇，必定有探討flutter的文章。沒(méi)用過(guò)flutter，但是對(duì)于跨平臺(tái)的技術(shù)，我一直都在研究。

為什么是uni-app

之前一直在找解決跨平臺(tái)的方案，嘗試了很多方案，比如滴滴的變色龍，但是最終還是選擇了uni-app，這里附上uni-app的官網(wǎng)。為什么會(huì)選擇它呢，第一，vue語(yǔ)法，學(xué)習(xí)成本低，上手速度快，只要之前你做過(guò)vue的項(xiàng)目，那么就能很快上手，其實(shí)是vue和微信小程序的結(jié)合體，一半vue，一半微信小程序。第二，長(zhǎng)期維護(hù)，之前做微信小程序的時(shí)候，選擇了美團(tuán)的mpvue，但是后面發(fā)現(xiàn)長(zhǎng)期不維護(hù)了，提了Issues也沒(méi)人理，隨之就放棄了，而uni-app長(zhǎng)期在維護(hù)，這樣看出了開(kāi)發(fā)團(tuán)隊(duì)的用心。第三，跨平臺(tái)的能力，uni-app能夠跨多個(gè)終端，H5，安卓，Ios，微信小程序，百度小程序，頭條小程序，支付寶小程序，真正實(shí)現(xiàn)了一套代碼，多端運(yùn)行，而且很好適應(yīng)了我國(guó)的市場(chǎng)。第四，日益豐富的插件市場(chǎng)，uni的插件市場(chǎng)也在日益強(qiáng)大，能夠基本上滿足我們平時(shí)的開(kāi)發(fā)需求。

uni-app的組件有原生調(diào)用能力，第三方的vue庫(kù)在調(diào)原生接口時(shí)跟 5+runtime 不兼容。就像nativescript 有vue版和angular版，類似于react native , 都是起源于phonegap/cordova

實(shí)際開(kāi)發(fā)效果遵義小紅椒 做了一款app，打包了安卓，Ios,微信小程序3個(gè)平臺(tái)，產(chǎn)出的效果都還是不錯(cuò)，總體還是比較滿意。而且打包過(guò)程也很方便簡(jiǎn)單，配套的HBuilderX自動(dòng)內(nèi)置了打包功能，所以也省去了打包的煩惱。

遵義小紅椒 建議

如果你現(xiàn)在想做一款跨平臺(tái)的產(chǎn)品，而且有vue和微信小程序的經(jīng)驗(yàn)，最重要的，你不想學(xué)習(xí)一門新語(yǔ)言，那么uni-app也許是你的一個(gè)選擇。

網(wǎng)站欄目：flutter內(nèi)嵌廣告,flutter 接入廣告
文章URL：http://chinadenli.net/article0/phgeoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、軟件開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)、定制開(kāi)發(fā)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)