新聞中心
Flutter中InheritedWidget的使用
在Tree中從上往下高效傳遞數(shù)據(jù)的基類widget , 定義為:abstract class InheritedWidget extends ProxyWidget
創(chuàng)新互聯(lián)長期為1000多家客戶提供的網(wǎng)站建設服務,團隊從業(yè)經(jīng)驗10年,關注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為彝良企業(yè)提供專業(yè)的做網(wǎng)站、網(wǎng)站建設,彝良網(wǎng)站改版等技術服務。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
Flutter的響應式開發(fā)與React類似,數(shù)據(jù)都是自頂向下的。
假設有祖先組點A,中間經(jīng)過結點B, C,然后到結點D,D需要從A中獲取數(shù)據(jù)f,那按照自頂向下數(shù)據(jù)流轉,f需要依次傳遞給B及C,最后才到C。這樣開發(fā)極為不靈活,成本也比較高。所有Flutter需要有跨結點(只能是祖先后代節(jié)點,不能跨兄弟節(jié)點)高效傳遞數(shù)據(jù)的方案。
大體意思如下:
InheritedWidget 是在樹中高效向下傳遞信息的基類部件;
調(diào)用[BuildContext.inheritFromWidgetOfExactType]方法可以從 BuildContext 中獲取到最近的 InheritedWidget 類型的實例;
在 InheritedWidget 類型的控件被引用,也就是調(diào)用過 inheritFromWidgetOfExactType 方法后,當 InheritedWidget 自身狀態(tài)改變時,會導致引用了 InheritedWidget 類型的子控件重構(rebuild)。
這里隨便定義一個人 Person 類。
創(chuàng)建一個類繼承 InheritedWidget,并實現(xiàn) updateShouldNotify 方法。
之前說到調(diào)用[BuildContext.inheritFromWidgetOfExactType]方法可以從 BuildContext 中獲取到最近的 InheritedWidget 類型的實例,所以此處定義一個靜態(tài)的 of 方法,通過傳入的 context 獲取到最近的 InheriedDataWidget 實例。
1.定義數(shù)據(jù)模型
這里隨便定義一個 Person 類。
2.自定義 InheritedWidget 控件類
創(chuàng)建一個類繼承 InheritedWidget,并實現(xiàn) updateShouldNotify 方法。
之前說到調(diào)用[BuildContext.inheritFromWidgetOfExactType]方法可以從 BuildContext 中獲取到最近的 InheritedWidget 類型的實例,所以此處定義一個靜態(tài)的 of 方法,通過傳入的 context 獲取到最近的 InheriedDataWidget 實例。
3.InheriedDataWidget 的使用
InheriedDataWidget 使用起來也很簡單,它本身也是一個控件,只要在任意一個頁面的子控件調(diào)用其構造方法就行,這里我們定義一個形如的 Widget 樹。
WidgetA 是一個 StatefulWidget 類型的控件,可以調(diào)用 setState 刷新,如果是繼承人 Stateless 類型的控件,那我們也可以通過 Stream 或者其他方式刷新數(shù)據(jù),感興趣的請看[什么是 Stream? Dart
WidgetA1_1 類
WidgetA1_2 類
WidgetA1_3 類
當我們點擊 floatingActionButton 的時候,WidgetA1, WidgetA1_1, WidgetA1_2 的控件都會更新 Person 的信息,而且每點 floatingActionButton 一次, 當我們點擊 floatingActionButton 的時候,WidgetA1, WidgetA1_1, WidgetA1_2 的控件都會更新 Person 的信息,而且每點 floatingActionButton 一次,都會輸出:
如果我們試圖在和 WidgetA 的同一層級的兄弟節(jié)點去訪問 InheriedDataWidget 的 Person 數(shù)據(jù),是不行的,因為父節(jié)點中并沒有插入 InheriedDataWidget。
把 WidgetB 和 WidgetA 保持同一節(jié)點
這也體現(xiàn)了 Inheried(遺傳) 這一單詞的特性,遺傳只存在于父子。兄弟不存在遺傳的關系。
這種數(shù)據(jù)共享的方式在某些場景還是很有用的,就比如說全局主題,字體大小,字體顏色的變更,只要在 App 根層級共享出這些配置數(shù)據(jù),然后在觸發(fā)數(shù)據(jù)改變之后,所有引用到這些共享數(shù)據(jù)的地方都會刷新,這換主題,字體是不是就很輕松,事實上 Theme.of(context).primaryColor 之流就是這么干的。
以上就是有關InheritedWidget的使用。
自己也是從事Android開發(fā)5年有余了;整理了一些Android開發(fā)技術核心筆記和面經(jīng)題綱,有關更多Android開發(fā)進階技術資料、面經(jīng)題綱、核心技術筆記; 想要進階自己、拿高薪的同學請私信我回復“核心筆記”或“面試”領??!
Flutter 之 文件操作(二十九)
Dart的 IO 庫包含了文件讀寫的相關類,它屬于 Dart 語法標準的一部分,所以通過 Dart IO 庫,無論是 Dart VM 下的腳本還是 Flutter,都是通過 Dart IO 庫來操作文件的,不過和 Dart VM 相比,F(xiàn)lutter 有一個重要差異是文件系統(tǒng)路徑不同,這是因為Dart VM 是運行在 PC 或服務器操作系統(tǒng)下,而 Flutter 是運行在移動操作系統(tǒng)中,他們的文件系統(tǒng)會有一些差異。
Android 和 iOS 的應用存儲目錄不同, PathProvider 插件提供了一種平臺透明的方式來訪問設備文件系統(tǒng)上的常用位置。該類當前支持訪問兩個文件系統(tǒng)位置:
File代表一個整體的文件,他有三個構造函數(shù),分別是:
文件讀取本身有兩種形式,一種是文本,一種是二進制。
2.2.1 讀取文本內(nèi)容
如果是文本文件,F(xiàn)ile提供了readAsString、readAsLines、readAsStringSync、readAsLinesSync方法,讀取文本內(nèi)容
readAsString 一次性讀取所有文本
readAsLines 一行行的讀取文本
結果返回的是一個List,list中表示文件每行的內(nèi)容
readAsStringSync、readAsLinesSync同步讀取文本
2.2.2 讀取二進制內(nèi)容
如果文件是二進制,那么可以使用readAsBytes或者同步的方法readAsBytesSync:
dart中表示二進制有一個專門的類型叫做Uint8List,他實際上表示的是一個int的List。
上面提到的讀取方式,都是一次性讀取整個文件,缺點就是如果文件太大的話,可能造成內(nèi)存空間的壓力。
所以File為我們提供了另外一種讀取文件的方法,流的形式來讀取文件.
示例
dart提供了open和openSync兩個方法來進行隨機文件讀寫:
寫入和文件讀取一樣,可以一次性寫入或者獲得一個寫入句柄,然后再寫入。
一次性寫入的方法有四種,分別對應字符串和二進制
句柄形式可以調(diào)用openWrite方法,返回一個IOSink對象,然后通過這個對象進行寫入:
默認情況下寫入是會覆蓋整個文件的,但是可以通過下面的方式來更改寫入模式:
雖然dart中所有的異常都是運行時異常,但是和java一樣,要想手動處理文件讀寫中的異常,則可以使用try,catch:
我們還是以計數(shù)器為例,實現(xiàn)在應用退出重啟后可以恢復點擊次數(shù)。 這里,我們使用文件來保存數(shù)據(jù):
1.引入PathProvider插件;在pubspec.yaml文件中添加如下聲明:
執(zhí)行 flutter pub get
2.實現(xiàn)如下
參考:
flutter圖片內(nèi)存優(yōu)化
按照給定尺寸進行圖片的解碼,而不是解碼整個圖片的尺寸,用來減少內(nèi)存的占用。
官方文檔:
官方說明:
Instructs Flutter to decode the image at the specified dimensions instead of at its native size.
This allows finer control of the size of the image in ImageCache and is generally used to reduce the memory footprint of ImageCache .
The decoded image may still be displayed at sizes other than the cached size provided here.
使用:
三方庫: cached_network_image 限2.5.0之后版本才可用
設定最大的緩存寬度和高度 this.maxWidthDiskCache 、 this.maxHeightDiskCache
使用:
從相冊選取圖片,展示時使用指定尺寸寬高進行處理。
使用三方庫:
使用自定義 provider 來指定所需圖片的寬高:
AssetEntityImageProvider 傳入寬高和圖片原圖 AssetEntity 數(shù)據(jù)。
provider 中 key.entity.thumbDataWithSize 方法:
進入 entity 中 thumbDataWithSize 方法:
進入 _getThumbDataWithId 方法中,
進入getThumb:
調(diào)用iOS原生的獲取圖片方法,
進入 getThumbWithId 方法,
原生實現(xiàn)獲取置頂寬高縮略圖方法實現(xiàn):
使用 iOS 原生類 PHImageManager 的
來獲取縮略圖。
第三節(jié) Flutter Image圖片組件的使用
Image組件的構造方法
在 Android 中,我們都知道,圖片的顯示方式有很多,資源圖片、網(wǎng)絡圖片、文件圖片等等,在 Flutter 中也有多種方式,用來加載不同形式的圖片:
Image:通過ImageProvider來加載圖片
Image.asset:用來加載本地資源圖片
Image.file:用來加載本地(File文件)圖片
Image.network:用來加載網(wǎng)絡圖片
Image.memory:用來加載Uint8List資源(byte數(shù)組)圖片
Image 的一個參數(shù)是 ImageProvider,基本上所有形式的圖片加載都是依賴它,這個類里面就是實現(xiàn)圖片加載的原理。用法如下:
加載一個本地資源圖片,和 Android 一樣,有多種分辨率的圖片可供選擇,但是沿襲的是 iOS 的圖片風格,分為 1x,2x,3x,具體做法是在項目的根目錄下創(chuàng)建兩個文件夾,如下圖所示:
還要配置如下
在pubspec.yaml文件
加載一個本地 File 圖片,比如相冊中的圖片,用法如下
加載一個網(wǎng)絡圖片,用法如下:
有的時候我們需要像Android那樣使用一個占位圖或者圖片加載出錯時顯示某張?zhí)囟ǖ膱D片,這時候需要用到 FadeInImage 這個組件:
用來將一個 byte 數(shù)組加載成圖片,用法如下:
新聞標題:flutter訪問相冊,flutter 圖片上傳
轉載注明:http://www.dlmjj.cn/article/dsdopsj.html