Flutter自制工具之fluct助力Flutter快速開發(fā)神器

一個幫助開發(fā)Flutter應用程序的工具

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比竹溪網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式竹溪網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋竹溪地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。

.----------------------------------------------

| github地址:

|

| pub地址：

|

`----------------------------------------------

該工具無需添加到依賴項中，我們只需要 激活 即可,使用如下命令：

fluct 目前只有兩個命令 create 和 gen-assets

在 Flutter 開發(fā)過程中，我們創(chuàng)建文件是必須的，而AS自帶的創(chuàng)建文件，并沒有自動的生成相關的內(nèi)容，這會讓開發(fā)者非常的苦惱，類名還需要自己手動敲的話，而該命令，直接可以一步到位。

當運行此命令后，命令行會輸出以下內(nèi)容

可以看到，該命令輸出的內(nèi)容是簡單易懂的，我們來簡單使用一下吧。

創(chuàng)建 IndexPage 頁面，繼承自 StatefulWidget ,可以使用如下命令:

運行成功之后，我們會在項目下找到 index_page.dart 文件，內(nèi)容為:

當然，你也可以指定哪個文件夾，例如，我要在./lib/src/page 文件夾下創(chuàng)建 IndexPage ，使用如下命令

在開始之前，我們需要在項目根目錄下新建一個 fluct.yaml 文件,因為 fluct create -t custom 命令會找到它，內(nèi)容如下：

這里，我聲明了 inh 命令，然后運行這個命令之后會在生成文件的時候添加 inh 對應的內(nèi)容，內(nèi)容中我們值得注意的是 $NAME$ 占位符，該字符串會被替換成根據(jù)文件名生成的內(nèi)容，例如： index_page 會插入 IndexPage 到 $NAME$ 占位符中，最后，我們運行以下命令:

運行成功之后，我們能夠在根目錄下找到 index_inherited.dart 文件，內(nèi)容也是對應的自定義內(nèi)容

我們在使用資源文件時，需要在 pubspec.yaml 文件聲明資源文件的路徑

例如：我在 ./assets/images 文件夾下添加 a.png 圖片，需要在 pubspec.yaml 文件下聲明

或者使用文件夾路徑

這一步如果文件多起來，很容易出現(xiàn)混亂，導致聲明麻煩，引用麻煩，并隨著項目的迭代，資源文件有些不用了，也不知道哪個是哪個，這個時候， fluct gen-assets 命令幫到你

當運行 fluct gen-assets -h 會輸出以下內(nèi)容

到此，你已經(jīng)擁有了自動資源綁定的功能了，輸入 fluct gen-assets 即可

所有的內(nèi)容都聲明好了， very good ~

有小伙伴可能會疑惑， fluct create 運行之后會發(fā)現(xiàn)未找到命令，可能你使用了 flutter pub global activate fluct 命令激活，這個時候，我們可以使用 flutter pub run fluct create 運行

Flutter - 顯示/隱藏控件的幾種方法

實際效果，不會占位，隱藏時 TestWidget 不會加載，可 else 一個占位(則會加載占位的組件)

實際效果，會占位，顯示隱藏TestWidget都會加載

實際效果，不會占位，顯示隱藏TestWidget都會加載

實際效果，可選擇是否占位，不占位，隱藏時TestWidget不會加載，占位，顯示隱藏TestWidget都會加載

Visibility 選擇占位時，隱藏 TestWidget

Flutter（6）：基礎組件之Image

Image是一個用于展示圖片的組件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

Image.asset - 用于從資源目錄的顯示圖片,需要在 pubspec.yaml 文件中聲明。

Image.network - 用于從網(wǎng)絡上顯示圖片。

Image.file - 用于從文件里顯示圖片。

Image.memory - 用于從內(nèi)存里（Uint8List）顯示圖片。

alignment → AlignmentGeometry - 圖像邊界內(nèi)對齊圖像。

centerSlice → Rect - 九片圖像的中心切片。

color → Color - 該顏色與每個圖像像素混合colorBlendMode。

colorBlendMode → BlendMode - 用于 color 與此圖像結合使用。

fit → BoxFit - 圖像在布局中分配的空間。

gaplessPlayback → bool - 當圖像提供者發(fā)生變化時，是繼續(xù)顯示舊圖像（true）還是暫時不顯示（false）。

image → ImageProvider - 要顯示的圖像。

matchTextDirection → bool - 是否在圖像的方向上繪制圖像 TextDirection。

repeat → ImageRepeat - 未充分容器時，是否重復圖片。

height → double - 圖像的高度。

width → double - 圖像的寬度。

加載資源圖片需要將圖片資源放入工程中，例如：新建images文件夾，將圖片放在該文件夾下，圖片適配則是使用ios的方式1X，2X，3X：

然后在pubspec.yaml中配置assets：

加載資源/網(wǎng)絡/本地文件圖片/內(nèi)存圖片：

占位圖加載圖片：

圓形圖片：1.裁剪實現(xiàn) 2.CircleAvatar實現(xiàn) 3.Container邊框?qū)崿F(xiàn)

圓角圖片：1.裁剪實現(xiàn) 2.Container邊框?qū)崿F(xiàn)

BoxFit.contain 全圖居中顯示但不充滿，顯示原比例

BoxFit.cover 圖片可能拉伸，也可能裁剪，但是充滿容器

BoxFit.fill 全圖顯示且填充滿，圖片可能會拉伸

BoxFit.fitHeight 圖片可能拉伸，可能裁剪，高度充滿

BoxFit.fitWidth 圖片可能拉伸，可能裁剪，寬度充滿

BoxFit.scaleDown 效果和contain差不多， 但是只能縮小圖片，不能放大圖片

下一節(jié)學習基礎組件之Text

Flutter開發(fā)--如何布局？

相對于iOS開發(fā)，F(xiàn)lutter的布局更具有靈活性，每個頁面設計都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應該如何去布局，我覺得不現(xiàn)實，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項目中的一個頁面，來一步一步的拆解布局的流程。整個過程，基本上按照拆解、組件封裝、具體布局這三步來的。

根據(jù)設計圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內(nèi)容，因為涉及到疊加，因此考慮用Stack；

系統(tǒng)介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個contanier，無須指定位置，全視圖擴展；載放logo圖標在上一層，用Image。最后兩個Text同級放在最上層。Image，Text各用Positioned包裹去指定位置。

登錄內(nèi)容模塊是最外層是一個Contanier容器，去控制背景色和圓角。然后是一個Column元素，逐行排列。

第一行為Image，

第二行為Text，

第三行可以看成一個小Column，分兩塊進行布局

第四行可以看成一個小Column，分兩塊進行布局

第五行可以看作一個TextButton，

第六行可以看作一個Row，分三塊進行布局

通過上面這樣一步一步的分析后，基本上對大致的布局有了一個了解，最外層的控件大致選對（只要能實現(xiàn)的話，就是復雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復的或者覺得可以封裝出來的部分，則進行下一步。

每一行的拆解，大致也是按照這個思路來進行，因此筆者在這里就不做講解了。

在做到第三第四行的時候，發(fā)現(xiàn)這兩個很相似，而且設計到一些交互邏輯，筆者就想對第三第四行的這種展示進行封裝，覺得今后的布局可能會用到，因此在這一步，可以先把這一塊兒抽離出一個控件。利用TextField來實現(xiàn)這種輸入操作，具體的實現(xiàn)筆者不再詳細的描述了。

經(jīng)過這一步，整體的規(guī)劃設計圖已經(jīng)有了，各個組件也都有了，接下來的工作就是組裝了。

具體布局設計到一些細節(jié)的地方，例如整體Column的居中對齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。

像第六行row是放在底部的，就可以在第六行前面增加一個Spacer()去填充空白區(qū)域。

對文字顏色大小等，可以用TextStyle直接設置。

對于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。

Android原生和Flutter使用過程的差異對比（二）

1、常用布局的對比

使用下來其他組件大致還算方便，但是相對布局而言使用便利程度上Android原生完勝，ConstraintLayout內(nèi)部的所有子View可以設置互相之間的位置依賴關系。

而Flutter的Stack組件內(nèi)部的Children只能通過外層包裹 Align后 固定位置，比如 Alignment.topLeft、Alignment.bottomRight 等。遇到復雜的堆疊布局需要通過外層包裹 Positioned 組件后設置固定的 top 和 left 距離以達到效果，內(nèi)部子組件之間無法設置位置關聯(lián)關系。

2、一些常用屬性設置上的差異：

Margin外邊距

Android：直接在布局文件對View設置android:layout_marginStart、android:layout_marginTop

Flutter：需嵌套 Container 組件并在內(nèi)部設置具體的 margin 值

Padding內(nèi)邊距

Android：TextView、ImageView、各種Layout都可以直接在屬性上設置android:paddingStart

Flutter：需嵌套 Padding 組件并在內(nèi)部設置具體的值

組件的可見性

Android：每個view都可以通過setVisibility來設置可見、隱藏或者隱藏但占位

Flutter：沒有單獨設置組件是否顯示的api，只能通過 bool 值控制是否添加該組件

事件監(jiān)聽

Android：常規(guī)的setOnClickListener和setOnLongClickListener設置單擊和長按事件

Flutter：在需要添加事件監(jiān)聽的組件外層嵌套 InkWell 或 GestureDetector 并設置 onTap 等

3、生命周期

Android：

Activity和Fragment各自有完整的生命周期鏈路onCreate、onStart、onResume、onPause、onDestroy等

Flutter：

萬物皆組件，組件繼承 WidgetsBindingObserver 并重寫 didChangeAppLifecycleState 函數(shù)進行監(jiān)聽

退回桌面依次執(zhí)行inactive 》= paused，此時界面不可見用戶不可操作，從桌面重新進入app執(zhí)行resumed，狀態(tài)較少如需在某些條件下觸發(fā)特定操作可能要找別的方案，比如發(fā)通知之類的

第三節(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占位,float占位符
標題來源：http://chinadenli.net/article21/dsepgjd.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、靜態(tài)網(wǎng)站、網(wǎng)站設計、網(wǎng)站收錄、響應式網(wǎng)站、網(wǎng)站建設

廣告

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