Flutter：手把手教你使用滾動型列表組件：ListView

ListView的基礎創(chuàng)建使用有三種方式：

為企業(yè)提供網站建設、成都網站建設、網站優(yōu)化、全網整合營銷推廣、競價托管、品牌運營等營銷獲客服務。成都創(chuàng)新互聯擁有網絡營銷運營團隊，以豐富的互聯網營銷經驗助力企業(yè)精準獲客，真正落地解決中小企業(yè)營銷獲客難題，做到“讓獲客更簡單”。自創(chuàng)立至今，成功用技術實力解決了企業(yè)“網站建設、網絡品牌塑造、網絡營銷”三大難題，同時降低了營銷成本，提高了有效客戶轉化率，獲得了眾多企業(yè)客戶的高度認可！

通過默認構造函數來創(chuàng)建列表，應用場景 = 短列表

這種方式創(chuàng)建的列表存在一個問題：對于那些長列表或者需要較昂貴渲染開銷的子組件，即使還沒有出現在屏幕中但仍然會被ListView所創(chuàng)建，這將是一項較大的開銷，使用不當可能引起性能問題甚至卡頓。

長列表

列表子項之間需要分割線

ListView的進階使用主要包括：下拉刷新 上拉加載

在Flutter中，ListView結合RefreshIndicator組件實現下拉刷新

通過包裹一層RefreshIndicator，自定義onRefresh回調方法實現

方式有兩種：

通過ListView.controller屬性可以判斷ListView是否滑動到了底部，再進行上拉加載

NotificationListener是一個Widget，可監(jiān)聽子Widget發(fā)出的Notification

ListView在滑動時中會發(fā)出ScrollNotification類型的通知，可通過監(jiān)聽該通知得到ListView的滑動狀態(tài)，判斷是否滑動到了底部，從而進行上拉加載

NotificationListener有一個onNotification屬性，定義了監(jiān)聽的回調方法，通過它來處理加載更多邏輯

不定期分享關于 安卓開發(fā) 的干貨，追求 短、平、快 ，但 卻不缺深度 。

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

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

globalkey唯一定義了某個element，它使你能夠訪問與element相關聯的其他對象，例如buildContext、state等。應用場景：跨widget訪問狀態(tài)。

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

Flutter框架內部提供了一個非常小巧精致的組件，專門用于局部組件的刷新。適用于值改動的刷新。

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

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

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

異步UI更新：

很多時候我們會依賴一些異步數據來動態(tài)更新UI，比如在打開一個頁面時我們需要先從互聯網上獲取數據，在獲取數據的過程中顯示一個加載框，等獲取到數據時我們再渲染頁面；又比如我們想展示Stream（比如文件流、互聯網數據接收流）的進度。當然StatefulWidget我們完全可以實現以上功能。但由于在實際開發(fā)中依賴異步數據更新UI的這種場景非常常見，并且當StatefulWidget中控件樹較大時，更新一個屬性導致整個樹重建，消耗性能，因此Flutter專門提供了FutureBuilder和SteamBuilder兩個組件來快速實現這種功能。

通常情況下，子Widget無法單獨感知父Widget的變化，當父state變化時，通過其build重建所有子widget；

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

InheritedWidgetData

TestData

InheritedTest1Page

provider是Google I/O 2019大會上宣布的現在官方推薦的管理方式，而ChangeNotifierProvider可以說是Provider的一種：

yaml文件需要引入provider: ^3.1.0

頂層嵌套ChangeNotifierProvider

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

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

使用Provider.of(context)獲取DataInfo

nextPage：

使用Consumer包住需要使用共享數據的Widget

RepaintBoundary就是重繪邊界，用于重繪時獨立于父視圖。頁面需要更新的頁面結構可以用 RepaintBoundary組件嵌套,flutter 會將包含的組件獨立出一層"畫布"，去繪制。官方很多組件 外層也包了層 RepaintBoundary 標簽。如果你的自定義view比較復雜，應該盡可能的避免重繪。

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

3. Flutter - 基礎組件 之 Text

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

1. 文本布局： 例如文本對齊方式 textAlign 、文本排版方向 textDirection ，文本顯示最大行數 maxLines 、文本截斷規(guī)則 overflow 等等

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

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

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

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

且 WidgetSpan 繼承自 PlaceholderSpan

Flutter自定義繪制組件

Flutter中自定義組件一般有兩種方式：

CustomPaint繼承自SingleChildRenderObjectWidget，即它可以在通過嵌套引入到widget樹中，并且可以有一個child子widget。它的構造方法如下：

painter和foregroundPainter需要接收CustomPainter對象，是CustomPaint核心。CustomPainter是進行UI繪制的核心類，繪制時, CustomPaint 首先在畫布上調用 painter繪制 , 然后再繪制它的 child Widget, child 繪制完成后再調用 foregroundPainter 進行繪制。

size屬性標識繪制區(qū)域大小，但當CustomPaint有child，該屬性將會忽略，而使用child的大小為繪制區(qū)域大小。

isComplex和willChange用于控制繪制層緩存處理的，這里暫不討論。

可實現CustomPainter子類進行UI繪制

實現paint方法進行真正的繪制，canvas是畫布對象，size是繪制區(qū)域，是從CustomPaint中size屬性傳遞得到的。繪制過程與Android原生開發(fā)十分類似，連API都十分相像，這點對熟悉Android原生開發(fā)者真是太友好了。

Paint對象是畫筆對象，就是繪圖工具，我們可以設置畫筆的顏色、粗細、是否抗鋸齒、筆觸形狀以及作畫風格等，通過這些屬性我們可以很方便的來定制自己的UI效果，在繪制的過程中可以定義多個畫筆，以便實現多種風格圖形的集合。

根據需求選擇合適的畫筆屬性，完成你的繪制。

Canvas是繪制的畫布，它包含了很多繪制方法，可以繪制出各種形狀的圖形。需要注意的是，畫布是應用所有控件都在使用的, 所以通過這個畫布其實是可以繪制充滿屏幕的內容的，每次繪制都應該限制在本控件的區(qū)域(Size)內, 以免繪制覆蓋到其他組件。

下面介紹下Canvas的繪制方法：

PointMode是個枚舉

p1、p2為線段兩個端點

Rect定義矩形的大小位置，有多種構造方式:

RRect描述圓角矩形，他通過Rect和Radius來構造

畫圓比較簡單，c表示圓心位置，radius是半徑。

橢圓使用外接矩形確定大小位置，rect就是外接矩形。

繪制弧形，先確定弧形對應的橢圓，同樣地用外接矩形rect確定橢圓，然后根據起始點和結束點角度來確定那一段弧度，startAngle，sweepAngle分別代表起始和結束點角度，角度用弧度表示法。

useCenter表示是否連接閉合形狀，userCenter = false表示不閉合，即畫一段弧線，userCenter = true表示閉合，即繪制一個扇形。

繪制路徑，關鍵在于構建路徑Path，可以直接new Path對象，然后通過path方法可以連接出圖形，path關鍵方法如下：

還有其他方法，有興趣可以查看API。

ios flutter 混編

最近在集成flutter進項目

以收集編譯產物并以cocopods方式集成

產物大概放入兩個pod庫

這個暫且叫pod1，pod1放flutter.framework，第三方plugin.a，自己寫的基礎plugin，比如networking，hud等等（由于是混編，不可避免存在很多原生基礎組件，所以能公用的基礎組件都會弄一個flutter-plugin橋接）

第二個pod2放編譯之后的app.framwork,注冊文件GeneratedPluginRegistrant，以及各個業(yè)務模塊.a（有可能沒有）結構大概如下面

podspec大概如下

主工程引入這兩個pod庫即可

接下來從零開始搭建上文所說的

先創(chuàng)建一個flutter module

這個是主flutter工程，用來集成businessModule以及生成app.framework

結構如下圖

再生成一個業(yè)務工程

注意此時還需要進入example生成ios和Android工程，不然無法單獨編譯運行

這樣 這個單獨的業(yè)務模塊就可以單獨跑起來了

此時主flutter工程和業(yè)務工程均搭建完畢

在主工程pubspec.ymal文件講兩個工程關聯

好了 接下來就是編寫腳本收集產物了

編譯完成之后會在flutter主工程product生成如下文件

將上面文件分類收集做成文章開頭的pod1，pod2 ，在native工程引入即可

在集成flutter的過程中 踩不少坑 也閱讀很多前輩的文章，在此一并感謝

文章名稱：蘋果flutter組件,flutter macos app開發(fā)
網頁路徑：http://chinadenli.net/article33/dsipjss.html

成都網站建設公司_創(chuàng)新互聯，為您提供外貿建站、定制網站、ChatGPT、網站營銷、網頁設計公司、服務器托管

廣告

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