Flutter 上字體的另類玩法：FontFeature

在以前的 《Flutter 上默認(rèn)的文本和字體知識點(diǎn)》 和 《帶你深入理解 Flutter 中的字體“冷”知識》 中，已經(jīng)介紹了很多 Flutter 上關(guān)于字體有趣的知識點(diǎn)，而本篇講繼續(xù)介紹 Flutter 上關(guān)于 Text 的一個屬性： FontFeature ， 事實(shí)上相較于 Flutter ，本篇內(nèi)容可能和前端或者設(shè)計(jì)關(guān)系更密切 。

創(chuàng)新互聯(lián)建站主要從事成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)依蘭,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

什么是 FontFeature ？ 簡單來說就是影響字體形狀的一個屬性 ，在前端的對應(yīng)領(lǐng)域里應(yīng)該是 font-feature-settings ，它有別于 FontFamily ，是用于指定字體內(nèi)字的形狀的一個參數(shù)。

我們知道 Flutter 默認(rèn)在 Android 上使用的是 Roboto 字體，而在 iOS 上使用的是 SF 字體，但是其實(shí) Roboto 字體也是分很多類型的，比如你去查閱手機(jī)的 system/fonts 目錄，就會發(fā)現(xiàn)很多帶有 Roboto 字樣的字體庫存在。

所以 Roboto 之類的字體庫是一個很大的字體集，不同的 font-weight 其實(shí)對應(yīng)著不同的 ttf ，例如默認(rèn)情況下的 Roboto 是不支持 font-weight 為 600 的配置 ：

所以如下圖所示，如果我們設(shè)置了 w400 - w700 的 weight ，可以很明顯看到中間的 500 和 600 其實(shí)是一樣的粗細(xì)，所以在 設(shè)置 weight 或者設(shè)計(jì) UI 時(shí)，就需要考慮不同平臺上的 weight 是否支持想要的效果 。

回歸到 FontFeature 上，那 Roboto 自己默認(rèn)支持多少種 features 呢？ 答案是 26 種，它們的編碼如下所示，運(yùn)行后效果也如下圖所示，從日常使用上看，這 26 種 Feature 基本滿足開發(fā)的大部分需求。

而 iOS 上的 SF pro 默認(rèn)支持 39 種 Features ， 它們的編碼如下所示，運(yùn)行后效果也如下圖所示，可以看到 SF pro 支持的 Features 更多。

所以可以看到，并不是所有字體支持的 Features 都是一樣的，比如 iOS 上支持 sups 上標(biāo)顯示和 subs 下標(biāo)顯示，但是 Android 上的 Roboto 并不支持，甚至很多第三方字體其實(shí)并不支持 Features 。

有趣的是，在 Flutter Web 有一個渲染文本時(shí)會變模糊的問題 #58159 ，這個問題目前官方還沒有修復(fù)，但是你可以通過給 Text 設(shè)置任意 FontFeatures 來解決這個問題。

最后，如果對 FontFeature 還感興趣的朋友，可以通過一下資料深入了解，如果你還有什么關(guān)于字體上的問題，歡迎留言討論。

基于網(wǎng)友的問題再補(bǔ)充一下拓展知識，畢竟這方面內(nèi)容也不多 。

事實(shí)上在 dart 里就可以看到對應(yīng) FontWeight 約定俗稱用的是字體集里的什么字體：

所以如果對于默認(rèn)字體有疑問，可以在你的手機(jī)字體找找是否有對應(yīng)的字體， 比如雖然我們說 roboto 沒有 600 ，但是如果是 roboto mono 字體集是有 600 的 fontweight ，甚至還有 600 斜體： 。

另外注意這是 Flutter 而不是原生，具體實(shí)現(xiàn)調(diào)用是在 Engine 的 paragraph_skia.cc 和 paragraph_builder_skia.cc 下對應(yīng)的 setFontFamilies 相關(guān)邏輯，當(dāng)然默認(rèn)字體庫指定在 typography.dart 下就看到，例如 'Roboto' 、 '.SF UI Display' 、 '.SF UI Text' 、 '.AppleSystemUIFont' 、 'Segoe UI' ：

另外如果你在 Mac 的 Web 上使用 Flutter Web，可以看到指定的是 .AppleSystemUIFont ，而對于 .AppleSystemUIFont 它其實(shí)不算是一種字體，而是蘋果上字體的一種集合別稱：

[圖片上傳失敗...(image-40f5ce-1648368234737)]

還有，如果你去看 Flutter 默認(rèn)自帶的 cupertino/context_menu_action.dart ，就可以看到一個有趣的情況：

當(dāng)然，前面我們說了那么多，主要是針對英文的情況下，而在中文下還是有差異的 ，之前的文章也介紹過：

例如，在蘋果上的簡體中文其實(shí)會是 PingFang SC 字體，對應(yīng)還有 PingFang TC 和 PingFang HK 的繁體集，而關(guān)于這個問題在 Flutter 上之前還出現(xiàn)過比較有意思的 bug ：

當(dāng)然后續(xù)的 #16709 修復(fù)了這個問題 ，而在以前的文章我也講過，當(dāng)時(shí)我遇到了 “Flutter 在 iOS 系統(tǒng)上，系統(tǒng)語言是韓文時(shí)，在和中文一起出現(xiàn)會導(dǎo)致字體顯示異常" 的問題 ：

解決方法也很簡單，就是給 fontFamilyFallback 配置上 ["PingFang SC" , "Heiti SC"] 就可以了，這是因?yàn)轫n文在蘋果手機(jī)上使用的應(yīng)該是 Apple SD Gothic Neo 這樣的超集字體庫，【廣】這個字符在這個字體集上是不存在的，所以就變成了中文的【廣】；

所以可以看到，字體相關(guān)是一個平時(shí)很少會深入接觸的東西，但是一旦涉及多語言和繪制，就很容易碰到問題的領(lǐng)域 。

flutter直播怎么實(shí)現(xiàn)？

flutter作為一個相對來說比較新興的框架，相比于其他框架來說避免不了存在生態(tài)不完善的問題。要想實(shí)現(xiàn)flutter直播，可以接入即構(gòu)科技的Express Flutter SDK，然后通過集成、初始化SDK、登錄房間服務(wù)器、用戶推送自己的本地音視頻、拉取遠(yuǎn)端的音視頻流等簡單五個步驟實(shí)現(xiàn)簡單的實(shí)時(shí)音視頻場景進(jìn)行直播。

Flutter開源app---開眼短視頻

在玩安卓上有款組件化開源app的項(xiàng)目，一款模仿 Eyepetizer | 開眼視頻的 開源app,這款app設(shè)計(jì)風(fēng)格特別喜歡的，比較簡潔，美觀，然后最近又在學(xué)flutter的知識，于是就寫了一款flutter版本的開源短視頻，效果也是聽不錯的，廢話不多說，先上效果圖。

先附上項(xiàng)目地址：

項(xiàng)目api會在后面的參考鏈接里，或者直接項(xiàng)目內(nèi)查看。

項(xiàng)目地址：

更新：6/30 項(xiàng)目新增下拉刷新，上拉加載功能

kotlin版本開眼短視頻開發(fā)中，敬請期待...

總結(jié)：在此感謝參考的伙伴的文章，寫的也很好，然后我將這個項(xiàng)目改寫成了flutter，當(dāng)中也學(xué)習(xí)到了很多flutter相關(guān)的知識，后續(xù)還有繼續(xù)鞏固，不斷學(xué)習(xí)。

參考鏈接（包含本項(xiàng)目的api）

Flutter iOS 蘋果IAP(內(nèi)購)實(shí)現(xiàn)步驟及問題總結(jié)(全網(wǎng)最全)

點(diǎn)擊 “協(xié)議、稅務(wù)和銀行業(yè)務(wù)”

內(nèi)購用的是付費(fèi)應(yīng)用程序，先簽署《付費(fèi)應(yīng)用程序協(xié)議》，同意后狀態(tài)變更為“用戶信息待處理”，等待審核。

狀態(tài)更改完畢后，點(diǎn)擊“開始設(shè)置稅務(wù)、銀行業(yè)務(wù)和聯(lián)系信息”。

（1）添加銀行賬戶,按照要求填寫相關(guān)內(nèi)容即可。

（2）選擇報(bào)稅表，并填寫。所有與 Apple 有商業(yè)合作者必選都是美國，若有其他需求，可以多選。

繼續(xù)填寫，首先認(rèn)證公司基本信息，選擇所有人類型，確認(rèn)無誤后認(rèn)證條款處打?qū)?/p>

Part I 部分，繼續(xù)核對公司相關(guān)信息，選填內(nèi)容可不填。

Part III 部分，簽署稅務(wù)條約，設(shè)置利益限制條款的種類，選填內(nèi)容可不填。此部分如果需要可勾選上下圖勾選框，不需要可不勾選，我們這個項(xiàng)目沒有用到part III 部分,所以沒有勾選。

Part XXX 部分，確認(rèn)之前填寫的信息，勾選完畢后，提交

（3）填寫聯(lián)系信息，共5個。高級管理、財(cái)務(wù)、技術(shù)、法務(wù)、營銷。只需要提供5個人的基本信息即可。

只可使用一次的產(chǎn)品，使用之后即失效，必須再次購買。

示例： 釣魚 App 中的魚食。

只需購買一次，不會過期或隨著使用而減少的產(chǎn)品。

示例： 游戲 App 的賽道。

允許用戶在固定時(shí)間段內(nèi)購買動態(tài)內(nèi)容的產(chǎn)品。除非用戶選擇取消，否則此類訂閱會自動續(xù)期。

示例： 每月訂閱提供流媒體服務(wù)的 App。

允許用戶購買有時(shí)限性服務(wù)的產(chǎn)品。此 App 內(nèi)購買項(xiàng)目的內(nèi)容可以是靜態(tài)的。此類訂閱不會自動續(xù)期。

示例： 為期一年的已歸檔文章目錄訂閱。

App 內(nèi)購買項(xiàng)目的截屏，即所售項(xiàng)目的示意圖。例如，如果 App 內(nèi)購買項(xiàng)目是一本圖書，您可以提交圖書的截屏。您也可以提交購買頁的截屏。該截屏僅用于 Apple 審核，不會在 App Store 中顯示。

截屏要求如下：

iOS 至少需要 640 x 920 像素

Apple tvOS 需要 1920 x 1080 像素

macOS 需要 1280 x 800 像素

App 審核圖像上傳后，可以替換，但無法移除。當(dāng)您的 App 內(nèi)購買項(xiàng)目處于審核中時(shí)，您無法更新截屏。

沙箱賬號是不能直接在App Store進(jìn)行登錄的，只能在點(diǎn)擊了購買商品之后，在彈出的登錄框進(jìn)行登錄 。

驗(yàn)證是否已登錄沙箱測試賬號：

設(shè)置--iTunes Store與App Store，頁面拉到最底部，會看到沙箱賬戶項(xiàng)會列出你已登錄的沙箱測試賬號！

操作方法一：打開App Store應(yīng)用首頁滑到最下方--選中AppleID--注銷

操作方法二：設(shè)置--iTunes Store與App Store--選中AppleID--注銷

checks if the client can make payments(檢測App是否能支付)

getAvailablePurchases

Get all non-consumed purchases 獲取未消費(fèi)的商品

打印信息查詢；

原因：

沒有先執(zhí)行g(shù)etProducts，直接執(zhí)行requestPurchase方法,要先拉取商品列表，再執(zhí)行購買操作.

問題描述；

1.漏單必須要處理，玩家花RMB購買的東西卻丟失了，是絕對不能容忍的。所謂的漏單就是玩家已經(jīng)正常付費(fèi)，卻沒有拿到該拿的道具。

解決：只要購買成功，便將購買記錄(receipt等賬單信息)保存下來，然后將賬單信息傳送給我們游戲服務(wù)器，游戲服務(wù)器獲得賬單后，和蘋果服務(wù)器驗(yàn)證，賬單有效的話，回饋給游戲服務(wù)器處理，游戲服務(wù)器處理后，返回給游戲客戶端處理，處理完畢，將本地保存的購買記錄刪除。

官方文檔：向蘋果校驗(yàn)支付憑證

21000 App Store無法讀取你提供的JSON數(shù)據(jù)

21002 收據(jù)數(shù)據(jù)不符合格式

21003 收據(jù)無法被驗(yàn)證

21004 你提供的共享密鑰和賬戶的共享密鑰不一致

21005 收據(jù)服務(wù)器當(dāng)前不可用

21006 收據(jù)是有效的，但訂閱服務(wù)已經(jīng)過期。當(dāng)收到這個信息時(shí)，解碼后的收據(jù)信息也包含在返回內(nèi)容中

21007 收據(jù)信息是測試用（sandbox），但卻被發(fā)送到產(chǎn)品環(huán)境中驗(yàn)證 【請求sandbox校驗(yàn)支付憑證】

21008 收據(jù)信息是產(chǎn)品環(huán)境中使用，但卻被發(fā)送到測試環(huán)境中驗(yàn)證

消耗類型： 例如：金幣、道具等。

非續(xù)訂訂閱： non-renewable subscription 例如：VIP

您的首個 App 內(nèi)購買項(xiàng)目必須以新的 App 版本提交。請創(chuàng)建您的 App 內(nèi)購買項(xiàng)目，然后前往 App 的“App Store”頁，從“App 內(nèi)購買項(xiàng)目”中進(jìn)行選擇，點(diǎn)按“提交”。 了解更多

在上傳二進(jìn)制文件并提交首個 App 內(nèi)購買項(xiàng)目以供審核后，您可以使用下表提交其他 App 內(nèi)購買項(xiàng)目。

唐巧-iOS應(yīng)用內(nèi)付費(fèi)(IAP)開發(fā)步驟列表

未完~待續(xù)

當(dāng)使用內(nèi)購購買過商品之后沒有把這個交易關(guān)閉，所以再次去購買商品后就會調(diào)用以前已經(jīng)購買成功的交易去購買因?yàn)橐呀?jīng)購買過，才會有這個提示

原因：添加內(nèi)購項(xiàng)目時(shí)，信息填寫不完整，app審核圖像未上傳

處理方法：上傳app審核圖片( 合適的尺寸 )，點(diǎn)擊提交，狀態(tài)改為正在準(zhǔn)備審核中。

這個是內(nèi)購選擇類型不匹配原因?qū)е隆?/p>

購買成功之后，Apple會返回以下四個數(shù)據(jù)給應(yīng)用

Reference

Review the updated Paid Applications Schedule.

游客身份解決方案：即不登錄也要能購買

1）服務(wù)器端做一個蘋果審核機(jī)制，審核期間游客身份可以進(jìn)行一切行為，一旦審核通過，修改服務(wù)端即可達(dá)到強(qiáng)制用戶登錄進(jìn)行內(nèi)購買的目的（這個有點(diǎn)。。。）

2）游客可以進(jìn)行內(nèi)購買，購買時(shí)以設(shè)備UUID為準(zhǔn)，生成一個游客賬號，將購買信息保存在服務(wù)器和本地，當(dāng)用戶登錄正式賬戶后判斷此設(shè)備是否進(jìn)行過內(nèi)購，有的話提示用戶將游客身份購買的權(quán)益與現(xiàn)有賬號綁定，如果綁定，游客權(quán)益則遷移到正式賬戶，如果不遷移，則游客身份和正是賬戶是兩個獨(dú)立賬戶，正式賬戶不享有游客身份的權(quán)益（我用的這個）

內(nèi)購游客模式解決方案

iOS內(nèi)購規(guī)則

flutter怎么樣

flutter很強(qiáng)，目前一套代碼可以供Android，iOS， Web 使用，妥妥的一套代碼，多端使用，在跨平臺開發(fā)中，有著巨大的影響。

Flutter視頻播放器，簡潔！

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

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

需要音頻播放器的看這里： Flutter音樂播放器

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

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

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

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

其中 VideoPlayerState ：

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

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

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

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

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

我們看 video_player 的使用：

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

放棄不是不可能放棄的，這輩子都不會放棄的！

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

到這里就可以簡單使用了：

沒看錯，視頻播放就是這么簡單。

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

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

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

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

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

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

就是這玩意：

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

就是這玩意：

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

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

主要就是自定義這玩意：

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

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

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

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

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

當(dāng)前題目：flutter怎么玩,flutter經(jīng)驗(yàn)
路徑分享：http://www.rwnh.cn/article46/dsdgphg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站

廣告

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