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

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

創新互聯于2013年創立，先為望花等服務建站，望花等地企業，進行企業商務咨詢服務。為望花企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

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

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

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

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

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

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

異步UI更新：

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

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

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

InheritedWidgetData

TestData

InheritedTest1Page

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

yaml文件需要引入provider: ^3.1.0

頂層嵌套ChangeNotifierProvider

創建共享數據類DataInfo：

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

使用Provider.of(context)獲取DataInfo

nextPage：

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

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

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

Flutter局部刷新方法

Flutter中Widget分為StatefulWidget和StatelessWidget，分別為動態視圖和靜態視圖，視圖的更新需要調用StatefulWidget的setState方法，這會遍歷調用子Widget的build方法。當一個主頁面比較復雜時，會包含多個widget，如果直接調用setState，會遍歷所有子Widget的build，這是非常不必要的性能開銷，有沒有單獨刷新指定Widget的方式呢？這個時候就要用到GlobalKey了。

一個StatefulWidget包含一個Button，一個Text，通過點擊Button調用主Widget的setState方法，刷新Text，示例如下：

同樣一個StatefulWidget包含一個多個Text和Button，點擊Button我們只需要刷新指定的Text，通過GlobalKey的方式，實現如下：

主Widget，包含一個需要更新的TextWidget和一個不需要更新的Text

需要單獨更新的Widget

傳遞事件的Button

這樣點擊Button就只會更新指定的TextWidget了，效果如下：

這只是一個簡單的例子，在實際開發中為了頁面刷新的高效率，模塊化封裝非常重要。很多情況下都只需要局部刷新，而不是重構整個視圖。所以Globalkey的運用在項目中需要熟練掌握

Flutter（六）Android與Flutter混合開發（Hybird）

如果我們目前的項目是Android的，但是接下來我們希望部分頁面可以使用Flutter進行開發，甚至我們希望在Native頁面中嵌入FlutterUI組件，那么我們該如何實現呢？

假設你現在Android項目的目錄的結構是這樣的

這時候如果你想創建一個Flutter模塊，使得Android模塊和Flutter模塊之間可以進行交互，我們可以通過Android Studio新建一個Flutter Module，具體過程是：File — New — New Module ，之后選擇Flutter Module，指定Project Location的路徑為

也就是說，最終你的項目結構會是這樣的

接下來在Android Module的 build.gradle 文件中添加flutter依賴

先創建一個Flutter頁面

這里比較重要的是 window.defaultRouteName 這個字段，這個字段可以接收從Native傳遞過來的參數 （下文我們會介紹原生傳遞參數的方法），也就是說通過這個字段我們就可以進行Flutter頁面的路由的分發

我們可以直接在Android的 MainActivity 中啟動一個 FlutterActivity ，這里的 initialRoute 方法中傳遞的參數就對應Flutter層的 window.defaultRouteName

注意：需要在 AndroidManifest.xml 注冊 FlutterActivity

自己創建一個 FlutterAppActivity 繼承自 FlutterActivity

在 MainActivity 中啟動 FlutterAppActivity （另外別忘了在 AndroidManifest.xml 中注冊 FlutterAppActivity ）

兩種啟動方式的區別

如果單純只是想打開一個Flutter頁面，兩種方式實際上基本沒有太大區別，第一種方式也許還會更簡單一點。但是，在Flutter開發中，我們往往還需要開發一些Native插件供Flutter調用，如果使用復寫 FlutterActivity 的方式更有利于我們在 FlutterActivity 中注冊我們的Native插件，所以實際開發中一般推薦使用第二種方式

擴展思考

initialRoute 從名稱上看起來是Flutter提供給我們進行Native與Flutter交互的路由跳轉的，但是實際上他就是一個字符串，我們不僅僅可以傳遞一個路由名稱，有時候我們也可以通過這個參數傳遞一串JSON數據，然后在Flutter端進行解析，這樣我們就可以通過這個參數做更多的事情

activity_main.xml

FrameLayout 用于承載Flutter組件

MainActivity.java

使用 FragmentManager 將 FlutterFragment 添加到 FrameLayout 容器中

運行結果

上半部分是原生的TextView，下半部分是Flutter的Text組件

本節主要介紹了Native和Flutter之間的頁面跳轉，以及同一個頁面中Native與Flutter組件的組合。接下來會介紹如何編寫Android插件與Flutter進行數據交互

Flutter入門（二）——實現一個簡單的demo頁面

首先查看入口函數：

類MyApp：

MyHomePage:

state:

build:

此demo頁面涉及到兩個組件：圖片和icon。在這里做一個簡單的介紹，更詳細的學習請參考flutter官網和相關書籍

在flutter中，我們可以通過Image組件來加載并顯示圖片，Image的數據源可以是asset、文件、內存以及網絡。

ImageProvider 是一個抽象類，主要定義了圖片數據獲取的接口 load() ，從不同的數據源獲取圖片需要實現不同的 ImageProvider ，如 AssetImage 是實現了從Asset中加載圖片的ImageProvider，而 NetworkImage 實現了從網絡加載圖片的ImageProvider。

Image也提供了一個快捷的構造函數 Image.asset 用于從asset中加載、顯示圖片：

Image也提供了一個快捷的構造函數 Image.network 用于從網絡加載、顯示圖片：

Flutter中，可以像web開發一樣使用iconfont，iconfont也即"字體圖標"，它是將圖標做成字體文件，然后通過指定不同的字符而顯示不同的圖片。

加號為圖片組件，減一為icon組件。點擊加號，數字加1；點擊-1，數字減少1。

Flutter開發--如何布局？

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

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

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

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

第一行為Image，

第二行為Text，

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

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

第五行可以看作一個TextButton，

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

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

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

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

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

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

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

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

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

文章名稱：flutter復雜頁面,flutter 頁面特效
本文網址：http://vcdvsql.cn/article12/dsieogc.html

成都網站建設公司_創新互聯，為您提供網站維護、網站營銷、網站改版、軟件開發、做網站、網站排名

廣告

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