(1)Flutter記錄之啟動(dòng)頁

一年半前玩過flutter，忘光光...現(xiàn)在是時(shí)候重新拾取了。~

創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、網(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ù):028-86922220

啟動(dòng)頁一般只放圖片或者加幾行文字。

1、創(chuàng)建好flutter項(xiàng)目之后，在lib文件下面新建launch.dart或xx.dart.

2、在根目錄下新建images文件夾，如已有直接放入圖片

3、flutter_yijiake.iml中加入注入該圖片，并注意空格

4、在根目錄下的test/widget_test.dart中更改默認(rèn)的啟動(dòng)頁為當(dāng)前的啟動(dòng)頁路徑

5、最后重新設(shè)置啟動(dòng)時(shí)的頁面

6、非常簡單的啟動(dòng)頁面放logo圖片

值得一說的是，flutter框架的UI組件需要已new 組件的形式展開。

flutter學(xué)習(xí)二：資源文件images

在根目錄創(chuàng)建images文件夾。

在 pubspec.yaml 文件中，放開 assets:注釋

在 pubspec.yaml 文件中，dependencies: 依賴下面添加

則在Widget中

具體Icon展示樣式，我現(xiàn)在是根據(jù)展示的英文來顯示，具體是否滿足還得顯示出來查看，有點(diǎn)不確定性。

也可以根據(jù)自己切圖展示圖片比較方便。

在圖片加載過程中，給用戶展示一張默認(rèn)的圖片，能提高用戶體驗(yàn)。

使用FadeInImage組件來達(dá)到這個(gè)功能。FadeInImage能處理內(nèi)存中，App資源或者網(wǎng)絡(luò)上的圖片。

在 flutter pub 中搜索"transparent_image", 并根據(jù)例子安裝相應(yīng)版本的框架

在 flutter pub 中搜索"cached_network_image", 并根據(jù)例子安裝相應(yīng)版本的框架, 此框架類似于sdwebImage. 具體使用可以參考其 文檔

Flutter 自定義彈窗組件

封裝的彈窗必須要靈活，滿足實(shí)際開發(fā)中的大部分彈窗，比如有無標(biāo)題、有無內(nèi)容、有無關(guān)閉按鈕、有無操作按鈕以及按鈕的排列樣式等需要滿足多元化～

共有四個(gè)文件: ww_dialog.dart 、 ww_middle_bottom_dialog_widget.dart 、 ww_top_dialog_widget.dart 、 ww_top_dialog_item_data.dart

彈窗主要調(diào)用類，主要包含： WWDialog.showTopDialog 、 WWDialog.showMiddleDialog 、 WWDialog.showBottomDialog

支持自定義配置背景顏色、字體大小、顏色、統(tǒng)一回調(diào)、自定義按鈕、單獨(dú)回調(diào)、是否帶三角標(biāo)志、任意位置、最大高度、超過可以滑動(dòng)等～

部分展示效果：

支持配置背景顏色、字體大小、顏色、字重、按鈕排列方式、標(biāo)題、內(nèi)容、按鈕支持完全自定義、點(diǎn)擊的回調(diào)等～

部分展示效果：

支持配置背景顏色、字體大小、顏色、字重、按鈕排列方式、標(biāo)題、內(nèi)容、按鈕支持完全自定義、點(diǎn)擊的回調(diào)等～

部分展示效果：

中間、底部彈窗的彈窗widget

頂部彈窗的彈窗widget

頂部彈窗的數(shù)據(jù)源數(shù)據(jù)模型item

github傳送門：

Flutter初學(xué) —— 常用控件使用

在編寫幾個(gè) Flutter 項(xiàng)目后，發(fā)現(xiàn) Flutter 的強(qiáng)大之處在于業(yè)務(wù)中所有用到的控件以及場景都有對應(yīng)的處理方案；而 Dart 語言也與 Java 、 Kotlin 類似，所以對 Android 開發(fā)者來說門檻非常低；特意記錄一下常用的控件及其使用：

StatelessWidget 不需要額外的創(chuàng)建 State

StatefulWidget 創(chuàng)建 State 類，并可以在其中保存一些狀態(tài)

only 可以單獨(dú)設(shè)置每個(gè)方向的內(nèi)邊距

類似于 LinearLayout 中的 orientation 設(shè)置為 vertical ， mainAxisAlignment 表示豎向的一個(gè)對齊方式， crossAxisAlignment 表示橫向的對齊方式

與 Column 相反，主軸是橫向，對齊方式類似， crossAxisAlignment 表示豎向的對齊方式

類似 SizedBox ，一個(gè)容器，但是主要功能是有一個(gè) decoration —— 裝飾器，作用是繪制背景，或者使用 item 中的陰影

棧，先入后出，類似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定顯示在某一個(gè)位置

配合多 child 使用，會(huì)填充剩余的空間

Image 功能強(qiáng)大，使用不同的方法可以加載不同來源的圖片

看到這些方法，突然覺得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無論是圓形還是五角星都不在話下，然而 Android 要實(shí)現(xiàn)不規(guī)則的形狀，可是要下不少功夫的。

名字和 Android 的一模一樣，但是用法卻比 Android 的簡單很多：

主要就是 itemCount 與 itemBuilder ,其余就是配置樣式， itemBuilder 需要返回一個(gè) widget ，當(dāng)然了，每個(gè) ListView 都有其對應(yīng)的 item ，在里面的方法中編寫 widget 即可

與 ListView 類似，但是需要有一個(gè) delegate 類，作用是設(shè)置有多少列，每一列之間的間距是多少

GridView 沒有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的樣式， Flutter 中通常是使用裝飾器來處理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

Flutter_圖片分辨率適配及批量拓展使用

flutter開發(fā)中，圖片的引用是必不可少的，所以為了提高效率和精準(zhǔn)度，我們需要對不同分辨率的手機(jī)使用相對應(yīng)的切圖圖片，本章介紹如何進(jìn)行 圖片分辨率適配 和 圖片批量拓展處理 。

flutter中會(huì)首先根據(jù)系統(tǒng)的devicePixelRatio（每一個(gè)邏輯像素包含多少個(gè)原始像素，可以通過MediaQueryData.devicePixelRatio來得到）來找對應(yīng)倍數(shù)的文件夾下的圖片，如果沒有對應(yīng)倍數(shù)，找最接近的。

所以在flutter項(xiàng)目中，我們需要構(gòu)建對應(yīng)的倍數(shù)像素文件夾

之后再pubspec.yaml中，配置assets文件后就可以使用了（如使用"assets/images/jay.png"，會(huì)自動(dòng)適配該像素下最接近的jay圖片）。

使用flutter-img-sync插件批量化處理，具體操作如下

目前還不能處理gif、webp等格式的圖片，而且如果和上邊介紹的不同像素比適配方案一起使用的話，由于進(jìn)行了精準(zhǔn)定位，所以指定圖片后就不能進(jìn)行像素適配，這是目前還存在的較大問題，所以目前兩者方案只能暫時(shí)取一使用。

Flutter 之 文件操作（二十九）

Dart的 IO 庫包含了文件讀寫的相關(guān)類，它屬于 Dart 語法標(biāo)準(zhǔn)的一部分，所以通過 Dart IO 庫，無論是 Dart VM 下的腳本還是 Flutter，都是通過 Dart IO 庫來操作文件的，不過和 Dart VM 相比，F(xiàn)lutter 有一個(gè)重要差異是文件系統(tǒng)路徑不同，這是因?yàn)镈art VM 是運(yùn)行在 PC 或服務(wù)器操作系統(tǒng)下，而 Flutter 是運(yùn)行在移動(dòng)操作系統(tǒng)中，他們的文件系統(tǒng)會(huì)有一些差異。

Android 和 iOS 的應(yīng)用存儲(chǔ)目錄不同， PathProvider 插件提供了一種平臺(tái)透明的方式來訪問設(shè)備文件系統(tǒng)上的常用位置。該類當(dāng)前支持訪問兩個(gè)文件系統(tǒng)位置：

File代表一個(gè)整體的文件,他有三個(gè)構(gòu)造函數(shù)，分別是：

文件讀取本身有兩種形式，一種是文本，一種是二進(jìn)制。

2.2.1 讀取文本內(nèi)容

如果是文本文件，F(xiàn)ile提供了readAsString、readAsLines、readAsStringSync、readAsLinesSync方法，讀取文本內(nèi)容

readAsString 一次性讀取所有文本

readAsLines 一行行的讀取文本

結(jié)果返回的是一個(gè)List，list中表示文件每行的內(nèi)容

readAsStringSync、readAsLinesSync同步讀取文本

2.2.2 讀取二進(jìn)制內(nèi)容

如果文件是二進(jìn)制，那么可以使用readAsBytes或者同步的方法readAsBytesSync:

dart中表示二進(jìn)制有一個(gè)專門的類型叫做Uint8List,他實(shí)際上表示的是一個(gè)int的List。

上面提到的讀取方式，都是一次性讀取整個(gè)文件，缺點(diǎn)就是如果文件太大的話，可能造成內(nèi)存空間的壓力。

所以File為我們提供了另外一種讀取文件的方法，流的形式來讀取文件.

示例

dart提供了open和openSync兩個(gè)方法來進(jìn)行隨機(jī)文件讀寫：

寫入和文件讀取一樣，可以一次性寫入或者獲得一個(gè)寫入句柄，然后再寫入。

一次性寫入的方法有四種，分別對應(yīng)字符串和二進(jìn)制

句柄形式可以調(diào)用openWrite方法，返回一個(gè)IOSink對象，然后通過這個(gè)對象進(jìn)行寫入：

默認(rèn)情況下寫入是會(huì)覆蓋整個(gè)文件的，但是可以通過下面的方式來更改寫入模式：

雖然dart中所有的異常都是運(yùn)行時(shí)異常，但是和java一樣，要想手動(dòng)處理文件讀寫中的異常，則可以使用try,catch:

我們還是以計(jì)數(shù)器為例，實(shí)現(xiàn)在應(yīng)用退出重啟后可以恢復(fù)點(diǎn)擊次數(shù)。 這里，我們使用文件來保存數(shù)據(jù)：

1.引入PathProvider插件；在pubspec.yaml文件中添加如下聲明：

執(zhí)行 flutter pub get

2.實(shí)現(xiàn)如下

參考：

網(wǎng)站欄目：flutter樣式文件的簡單介紹
標(biāo)題URL：http://chinadenli.net/article30/dsdeepo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站策劃、軟件開發(fā)、網(wǎng)站導(dǎo)航、網(wǎng)站建設(shè)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(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)