flutter組件化,flutter組件化方案

Flutter（67）：Layout組件之ListBody

一個(gè)widget，它沿著一個(gè)給定的軸，順序排列它的子元素

創(chuàng)新互聯(lián)專注于企業(yè)成都營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、蠡縣網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為蠡縣等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

注意點(diǎn)：

最后這幾個(gè)組件怎么使用看需求選擇最適合的就行。

Flutter（5）：基礎(chǔ)組件之Row/Column

Flutter（33）：Material組件之ListTile、RefreshIndicator、ListView、Divider

下一節(jié)：Layout組件之CustomMultiChildLayout

Flutter（5）：基礎(chǔ)組件之Row/Column

Row：在水平方向上排列子widget的列表。

Column：在垂直方向上排列子widget的列表。

注意：這兩個(gè)屬于多子節(jié)點(diǎn)空間，可以將children排列成一行/一列，但是自身不帶滾動(dòng)屬性，如果超出了一行，在debug下面則會(huì)顯示溢出的提示。

MainAxisAlignment：主軸方向上的對(duì)齊方式，會(huì)對(duì)child的位置起作用，默認(rèn)是start。

其中MainAxisAlignment枚舉值：

center：將children放置在主軸的中心；

end：將children放置在主軸的末尾；

spaceAround：將主軸方向上的空白區(qū)域均分，使得children之間的空白區(qū)域相等，但是首尾child的空白區(qū)域?yàn)?/2；

spaceBetween：將主軸方向上的空白區(qū)域均分，使得children之間的空白區(qū)域相等，首尾child都靠近首尾，沒(méi)有間隙；

spaceEvenly：將主軸方向上的空白區(qū)域均分，使得children之間的空白區(qū)域相等，包括首尾child；

start：將children放置在主軸的起點(diǎn)；

其中spaceAround、spaceBetween以及spaceEvenly的區(qū)別，就是對(duì)待首尾child的方式。其距離首尾的距離分別是空白區(qū)域的1/2、0、1。

MainAxisSize：在主軸方向占有空間的值，默認(rèn)是max。

MainAxisSize的取值有兩種：

max：根據(jù)傳入的布局約束條件，最大化主軸方向的可用空間；

min：與max相反，是最小化主軸方向的可用空間；

CrossAxisAlignment：children在交叉軸方向的對(duì)齊方式，與MainAxisAlignment略有不同。

CrossAxisAlignment枚舉值有如下幾種：

baseline：在交叉軸方向，使得children的baseline對(duì)齊；

center：children在交叉軸上居中展示；

end：children在交叉軸上末尾展示；

start：children在交叉軸上起點(diǎn)處展示；

stretch：讓children填滿交叉軸方向；

TextDirection：阿拉伯語(yǔ)系的兼容設(shè)置，一般無(wú)需處理。

VerticalDirection：定義了children擺放順序，默認(rèn)是down。

VerticalDirection枚舉值有兩種：

down：從top到bottom進(jìn)行布局；

up：從bottom到top進(jìn)行布局。

top對(duì)應(yīng)Row以及Column的話，就是左邊和頂部，bottom的話，則是右邊和底部。

TextBaseline：使用的TextBaseline的方式，有兩種，前面已經(jīng)介紹過(guò)。

這個(gè)是Row/Column的內(nèi)的小控件，可以用來(lái)實(shí)現(xiàn)權(quán)重的布局

這邊使用一個(gè)Container，里面是Row，使用Expanded對(duì)子節(jié)點(diǎn)進(jìn)行權(quán)重處理，如果不使用Expanded，直接放入其他控件也是可以的，只是無(wú)法設(shè)置權(quán)重

對(duì)于內(nèi)容過(guò)長(zhǎng)的時(shí)候，會(huì)有溢出提示：

MainAxisAlignment.center：將children放置在主軸的中心；

MainAxisAlignment.start：將children放置在主軸的起點(diǎn)；

MainAxisAlignment.end：將children放置在主軸的末尾；

MainAxisAlignment.spaceAround：將主軸方向上的空白區(qū)域均分，使得children之間的空白區(qū)域相等，但是首尾child的空白區(qū)域?yàn)?/2；

MainAxisAlignment.spaceBetween：將主軸方向上的空白區(qū)域均分，使得children之間的空白區(qū)域相等，首尾child都靠近首尾，沒(méi)有間隙；

MainAxisAlignment.spaceEvenly：將主軸方向上的空白區(qū)域均分，使得children之間的空白區(qū)域相等，包括首尾child；

下一章我們學(xué)習(xí)基礎(chǔ)組件之Image

Flutter初始化

新建一個(gè)Flutter工程，android模塊。

1，只有一個(gè)Activity組件，它是Dart層繪制Widget的容器。

2，Application配置FlutterApplication。

應(yīng)用Application配置io.flutter.app.FlutterApplication類，App首次啟動(dòng)時(shí)，初始化。

調(diào)用FlutterMain.startInitialization()方法。

initConfig方法，從AndroidManfest.xml配置的applicaion節(jié)點(diǎn)獲取meta-data數(shù)據(jù)，初始化以下默認(rèn)值。

這些值都是使用中用到的name，例如，抽取apk中asset資源時(shí)，flutter_assets打包目錄，打包產(chǎn)物data名稱。

initResources方法， 初始化資源。

在Flutter打包apk的asset目錄下，包括fluttter_asset目錄/資源項(xiàng)，將資源從apk中抽取，保存在 Context.getDir("flutter", 0) 目錄下。

/data/user/0/包名/app_flutter目錄。

在目錄中創(chuàng)建一個(gè)時(shí)間戳文件，根據(jù)apk版本和包信息記錄的lastUpdateTime更新時(shí)間，第二次啟動(dòng)時(shí)，若apk未更新，不需要再次抽取。

加載so庫(kù)，libflutter.so，System.loadLibrary()。

主頁(yè)面繼承FlutterActivity，配置啟動(dòng)模式singleTop。

FlutterActivity類在io.flutter.app包， (區(qū)別io.flutter.embedding.android包)， 組件生命周期委托給FlutterActivityDelegate類。

組件啟動(dòng)，onCreate方法。

FlutterMain.ensureInitializationComplete方法，確保資源成功抽取完成，創(chuàng)建FlutterView視圖(io.flutter.view)，繼承SurfaceView類，setContentView方法，設(shè)置組件主布局即FlutterView視圖。

最后，根據(jù)Bundle路徑，runBundle()加載運(yùn)行，

調(diào)用FlutterView的runFromBundle方法，入口點(diǎn)在dart的main方法，

通過(guò)FlutterNativeView，調(diào)用FlutterJNI的native方法。

nativeRunBundleAndSnapshotFromLibrary方法。

任重而道遠(yuǎn)

Flutter組件（Widget）的局部刷新方式

Flutter中有兩個(gè)常用的狀態(tài)Widget分為StatefulWidget和StatelessWidget，分別為動(dòng)態(tài)視圖和靜態(tài)視圖，視圖的更新需要調(diào)用StatefulWidget的setState方法，這會(huì)遍歷調(diào)用子Widget的build方法。如果一個(gè)頁(yè)面內(nèi)容比較復(fù)雜時(shí)，會(huì)包含多個(gè)widget，如果直接調(diào)用setState，會(huì)遍歷所有子Widget的build，這樣會(huì)造成很多不必要的開(kāi)銷，所以非常有必要了解Flutter中局部刷新的方式：

globalkey唯一定義了某個(gè)element，它使你能夠訪問(wèn)與element相關(guān)聯(lián)的其他對(duì)象，例如buildContext、state等。應(yīng)用場(chǎng)景：跨widget訪問(wèn)狀態(tài)。

例如：可以通過(guò)key.currentState拿到它的狀態(tài)對(duì)象，然后就可以調(diào)用其中的onPressed方法。

Flutter框架內(nèi)部提供了一個(gè)非常小巧精致的組件，專門(mén)用于局部組件的刷新。適用于值改動(dòng)的刷新。

實(shí)現(xiàn)原理：在 initState 中對(duì)傳入的可監(jiān)聽(tīng)對(duì)象進(jìn)行監(jiān)聽(tīng)，執(zhí)行 _valueChanged 方法，_valueChanged 中進(jìn)行了 setState 來(lái)觸發(fā)當(dāng)前狀態(tài)的刷新。觸發(fā) build 方法，從而觸發(fā) widget.builder 回調(diào)，這樣就實(shí)現(xiàn)了局部刷新。可以看到這里回調(diào)的 child 是組件傳入的 child，所以直接使用，這就是對(duì) child 的優(yōu)化的根源。

可以看到 ValueListenableBuilder 實(shí)現(xiàn)局部刷新的本質(zhì)，也是進(jìn)行組件的抽離，讓組件狀態(tài)的改變框定在狀態(tài)內(nèi)部，并通過(guò) builder 回調(diào)控制局部刷新，暴露給用戶使用。

通過(guò)這個(gè)可以創(chuàng)建一個(gè)支持局部刷新的widget樹(shù)，比如你可以在StatelessWidget里面刷新某個(gè)布局，但是不需要改變成StatefulWidget；也可以在StatefulWidget中使用做部分刷新而不需要刷新整個(gè)頁(yè)面，這個(gè)刷新是不會(huì)調(diào)用Widget build（BuildContext context）刷新整個(gè)布局樹(shù)的。

異步UI更新：

很多時(shí)候我們會(huì)依賴一些異步數(shù)據(jù)來(lái)動(dòng)態(tài)更新UI，比如在打開(kāi)一個(gè)頁(yè)面時(shí)我們需要先從互聯(lián)網(wǎng)上獲取數(shù)據(jù)，在獲取數(shù)據(jù)的過(guò)程中顯示一個(gè)加載框，等獲取到數(shù)據(jù)時(shí)我們?cè)黉秩卷?yè)面；又比如我們想展示Stream（比如文件流、互聯(lián)網(wǎng)數(shù)據(jù)接收流）的進(jìn)度。當(dāng)然StatefulWidget我們完全可以實(shí)現(xiàn)以上功能。但由于在實(shí)際開(kāi)發(fā)中依賴異步數(shù)據(jù)更新UI的這種場(chǎng)景非常常見(jiàn)，并且當(dāng)StatefulWidget中控件樹(shù)較大時(shí)，更新一個(gè)屬性導(dǎo)致整個(gè)樹(shù)重建，消耗性能，因此Flutter專門(mén)提供了FutureBuilder和SteamBuilder兩個(gè)組件來(lái)快速實(shí)現(xiàn)這種功能。

通常情況下，子Widget無(wú)法單獨(dú)感知父Widget的變化，當(dāng)父state變化時(shí)，通過(guò)其build重建所有子widget；

InheriteddWidget可以避免這種全局創(chuàng)建，實(shí)現(xiàn)局部子Widget更新。InheritedWidget提供了一種在Widget樹(shù)中從上到下傳遞、共享數(shù)據(jù)的方式。Flutter SDK正是通過(guò)InheritedWidget來(lái)共享應(yīng)用主題和Locale等信息。

InheritedWidgetData

TestData

InheritedTest1Page

provider是Google I/O 2019大會(huì)上宣布的現(xiàn)在官方推薦的管理方式，而ChangeNotifierProvider可以說(shuō)是Provider的一種：

yaml文件需要引入provider: ^3.1.0

頂層嵌套ChangeNotifierProvider

創(chuàng)建共享數(shù)據(jù)類DataInfo：

數(shù)據(jù)類需要with ChangeNotifier 以使用 notifyListeners()函數(shù)通知監(jiān)聽(tīng)者更新界面。

使用Provider.of(context)獲取DataInfo

nextPage：

使用Consumer包住需要使用共享數(shù)據(jù)的Widget

RepaintBoundary就是重繪邊界，用于重繪時(shí)獨(dú)立于父視圖。頁(yè)面需要更新的頁(yè)面結(jié)構(gòu)可以用 RepaintBoundary組件嵌套,flutter 會(huì)將包含的組件獨(dú)立出一層"畫(huà)布"，去繪制。官方很多組件 外層也包了層 RepaintBoundary 標(biāo)簽。如果你的自定義view比較復(fù)雜，應(yīng)該盡可能的避免重繪。

以上總結(jié)了幾種Flutter的局部刷新的方式，可根據(jù)實(shí)際需要使用不同的方式，最適合的才是最好的。

3. Flutter - 基礎(chǔ)組件 之 Text

Text繼承自 StatelessWidget ，Text 主要通過(guò)設(shè)置 文本布局 及 文本樣式 控制顯示方式。

1. 文本布局： 例如文本對(duì)齊方式 textAlign 、文本排版方向 textDirection ，文本顯示最大行數(shù) maxLines 、文本截?cái)嘁?guī)則 overflow 等等

2 文本樣式： 如字體名稱 fontFamily 、字體大小 fontSize 、文本顏色 color 、文本陰影 shadows 等等，這些參數(shù)被統(tǒng)一封裝到了構(gòu)造函數(shù)中的參數(shù) style(TextStyle) 中

??在iOS中，我們可以使用NSAttributedString進(jìn)行富文本設(shè)置。在Flutter中 我們可以通過(guò) Text.rich() 或 RichText() 進(jìn)行富文本設(shè)置。

兩者均為 InlineSpan 類型， InlineSpan 為抽象類。

抽象類不能直接實(shí)例化。Flutter已為我們提供了

且 WidgetSpan 繼承自 PlaceholderSpan

Flutter（6）：基礎(chǔ)組件之Image

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

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

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

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

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

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

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

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

colorBlendMode → BlendMode - 用于 color 與此圖像結(jié)合使用。

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

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

image → ImageProvider - 要顯示的圖像。

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

repeat → ImageRepeat - 未充分容器時(shí)，是否重復(fù)圖片。

height → double - 圖像的高度。

width → double - 圖像的寬度。

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

然后在pubspec.yaml中配置assets：

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

占位圖加載圖片：

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

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

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

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

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

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

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

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

下一節(jié)學(xué)習(xí)基礎(chǔ)組件之Text

網(wǎng)站標(biāo)題：flutter組件化,flutter組件化方案
分享網(wǎng)址：http://muchs.cn/article40/phjdeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、用戶體驗(yàn)、全網(wǎng)營(yíng)銷推廣、自適應(yīng)網(wǎng)站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

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