(1)Flutter記錄之啟動頁

一年半前玩過flutter，忘光光...現在是時候重新拾取了。~

創新互聯公司主要從事成都網站制作、成都網站建設、外貿營銷網站建設、網頁設計、企業做網站、公司建網站等業務。立足成都服務西林,十余年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:028-86922220

啟動頁一般只放圖片或者加幾行文字。

1、創建好flutter項目之后，在lib文件下面新建launch.dart或xx.dart.

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

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

4、在根目錄下的test/widget_test.dart中更改默認的啟動頁為當前的啟動頁路徑

5、最后重新設置啟動時的頁面

6、非常簡單的啟動頁面放logo圖片

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

flutter學習二：資源文件images

在根目錄創建images文件夾。

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

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

則在Widget中

具體Icon展示樣式，我現在是根據展示的英文來顯示，具體是否滿足還得顯示出來查看，有點不確定性。

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

在圖片加載過程中，給用戶展示一張默認的圖片，能提高用戶體驗。

使用FadeInImage組件來達到這個功能。FadeInImage能處理內存中，App資源或者網絡上的圖片。

在 flutter pub 中搜索"transparent_image", 并根據例子安裝相應版本的框架

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

Flutter 自定義彈窗組件

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

共有四個文件: ww_dialog.dart 、 ww_middle_bottom_dialog_widget.dart 、 ww_top_dialog_widget.dart 、 ww_top_dialog_item_data.dart

彈窗主要調用類，主要包含： WWDialog.showTopDialog 、 WWDialog.showMiddleDialog 、 WWDialog.showBottomDialog

支持自定義配置背景顏色、字體大小、顏色、統一回調、自定義按鈕、單獨回調、是否帶三角標志、任意位置、最大高度、超過可以滑動等～

部分展示效果：

支持配置背景顏色、字體大小、顏色、字重、按鈕排列方式、標題、內容、按鈕支持完全自定義、點擊的回調等～

部分展示效果：

支持配置背景顏色、字體大小、顏色、字重、按鈕排列方式、標題、內容、按鈕支持完全自定義、點擊的回調等～

部分展示效果：

中間、底部彈窗的彈窗widget

頂部彈窗的彈窗widget

頂部彈窗的數據源數據模型item

github傳送門：

Flutter初學 —— 常用控件使用

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

StatelessWidget 不需要額外的創建 State

StatefulWidget 創建 State 類，并可以在其中保存一些狀態

only 可以單獨設置每個方向的內邊距

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

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

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

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

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

配合多 child 使用，會填充剩余的空間

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

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

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

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

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

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

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

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

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

flutter中會首先根據系統的devicePixelRatio（每一個邏輯像素包含多少個原始像素，可以通過MediaQueryData.devicePixelRatio來得到）來找對應倍數的文件夾下的圖片，如果沒有對應倍數，找最接近的。

所以在flutter項目中，我們需要構建對應的倍數像素文件夾

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

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

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

Flutter 之 文件操作（二十九）

Dart的 IO 庫包含了文件讀寫的相關類，它屬于 Dart 語法標準的一部分，所以通過 Dart IO 庫，無論是 Dart VM 下的腳本還是 Flutter，都是通過 Dart IO 庫來操作文件的，不過和 Dart VM 相比，Flutter 有一個重要差異是文件系統路徑不同，這是因為Dart VM 是運行在 PC 或服務器操作系統下，而 Flutter 是運行在移動操作系統中，他們的文件系統會有一些差異。

Android 和 iOS 的應用存儲目錄不同， PathProvider 插件提供了一種平臺透明的方式來訪問設備文件系統上的常用位置。該類當前支持訪問兩個文件系統位置：

File代表一個整體的文件,他有三個構造函數，分別是：

文件讀取本身有兩種形式，一種是文本，一種是二進制。

2.2.1 讀取文本內容

如果是文本文件，File提供了readAsString、readAsLines、readAsStringSync、readAsLinesSync方法，讀取文本內容

readAsString 一次性讀取所有文本

readAsLines 一行行的讀取文本

結果返回的是一個List，list中表示文件每行的內容

readAsStringSync、readAsLinesSync同步讀取文本

2.2.2 讀取二進制內容

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

dart中表示二進制有一個專門的類型叫做Uint8List,他實際上表示的是一個int的List。

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

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

示例

dart提供了open和openSync兩個方法來進行隨機文件讀寫：

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

一次性寫入的方法有四種，分別對應字符串和二進制

句柄形式可以調用openWrite方法，返回一個IOSink對象，然后通過這個對象進行寫入：

默認情況下寫入是會覆蓋整個文件的，但是可以通過下面的方式來更改寫入模式：

雖然dart中所有的異常都是運行時異常，但是和java一樣，要想手動處理文件讀寫中的異常，則可以使用try,catch:

我們還是以計數器為例，實現在應用退出重啟后可以恢復點擊次數。 這里，我們使用文件來保存數據：

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

執行 flutter pub get

2.實現如下

參考：

網站欄目：flutter樣式文件的簡單介紹
標題URL：http://vcdvsql.cn/article30/dsdeepo.html

成都網站建設公司_創新互聯，為您提供響應式網站、網站策劃、軟件開發、網站導航、網站建設、品牌網站制作

廣告

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