flutter頁面的繪制和管理

Element管理Widget和RenderObject。

10年積累的網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有達州免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

widget保持顯示當(dāng)前的頁面狀態(tài)，當(dāng)widget產(chǎn)生點擊等交互，調(diào)用setState()改變element中管理的state，

flutter刷新頁面的方法

這種方法最常見，但是有些地方引用的話，刷新的成本比較大，刷新的是整個頁面，數(shù)據(jù)太多加載太慢的話，會有閃爍的現(xiàn)象

這種方法類似于iOS中的set方法，通過設(shè)置某個屬性的時候，去刷新某個控件。在flutter中這種刷新方式，是對上面setState(){}方法的改進，根本的方法還是setState(){}，只不過是通過方法去刷新某個控件。如下：

首先在pubspec.yaml中添加provider依賴

下面通過provider來實現(xiàn)一個發(fā)送驗證碼的案例。

創(chuàng)建一個TimerModel文件

頁面布局如下：

flutter 頁面的生命周期（轉(zhuǎn)）

轉(zhuǎn)自

在 Flutter 中，有兩類常用的 Widget：

在開發(fā)過程中，我們經(jīng)常需要繼承它們兩來實現(xiàn)自己的 Widget。

一個 StatelessWidget 是不能被改變的，比如： Icon 、 Text 等。

如果你的控件一旦顯示，就不需要再做任何的變更，那么你應(yīng)該使用 StatelessWidget 。

實現(xiàn)一個自己的 StatelessWidget 很簡單。

當(dāng)你看到下面這個例子?時，你就知道它有多簡單了。

看，只要在 build() 中返回你的視圖就可以了。

一個 StatefulWidget 是有狀態(tài)的，可變的。

它可以改變自己的外觀，以響應(yīng)用戶的操作或者數(shù)據(jù)的變化。

比如： CheckBox 、 Switch ..

我們之所以能夠改變一個 StatefulWidget ，是因為它有一個設(shè)置狀態(tài)的函數(shù)：

調(diào)用這個函數(shù)后，就會觸發(fā) StatefulWidget 的視圖樹重建。

因此，當(dāng)我們需要一個可交互的，即能根據(jù)用戶操作或數(shù)據(jù)變化而改變視圖的 Widget 時，那就得用上 StatelessWidget 了。

現(xiàn)在，來創(chuàng)建一個自定義的 StatefulWidget：

從上面的例子中可以看到， StatefulWidget 會要求提供一個含有視圖樹的 State 。

既然 State 能夠控制一個視圖的狀態(tài)，那它肯定會有一系列的生命周期。

上圖就是 State 的生命周期圖。

Flutter頁面導(dǎo)航

返回用navigator的pop方法

使用navigator的pushNamed方法push到對應(yīng)的頁面

在導(dǎo)航的目的頁面的build方法里用ModalRoute.of(context)方法獲取需要的參數(shù)：

第二個頁面返回到第一個頁面的時候如果要帶參數(shù)，可以使用async異步方法來實現(xiàn)

用navigator的push方法，在頁面的初始化方法中傳遞參數(shù)：

flutter跳轉(zhuǎn)原生頁面后的穿透問題

現(xiàn)象：

flutter頁面通過present跳轉(zhuǎn)原生頁面后，原生頁面上的點擊會首先響應(yīng)下面的flutter頁面中的內(nèi)容（比如按鈕什么的）。

這是flutter框架一直存在的一個bug。在github上有相關(guān)的issue。

原因推測：

推測是flutter對控制器（或者view）加了分類，重寫了控制器的點擊事件，用來計算是否在對應(yīng)的點擊位置有flutter響應(yīng)事件。沒有的話再扔出去點擊事件。

解決方案1：

在原生控制器中，加入點擊事件的幾個方法的空實現(xiàn)，用以覆蓋flutter框架中的實現(xiàn)：

-(void)touchesBegan:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesMoved:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesCancelled:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesEnded:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

讓事件不被flutter截獲即可。

解決方案2：

直接切換window的根控制器到原生控制器即可。別忘暫時保存flutter控制器。

在返回時再切換回flutter中。

解決方案3：

在flutter跳轉(zhuǎn)到原生頁面之前，在flutter中加上一個蒙層，用來隔絕手勢往flutter下面的view傳遞。原生頁面返回flutter時再移除這個蒙層。