flutter頁面切換,flutter 頁面特效

Flutter 三個頁面由tab和TabBarView實現(xiàn),其中一個頁面是webview,切換tab,怎么取消Webview的頁面

class _OpenLogListComponentState extends StateOpenLogListComponent with AutomaticKeepAliveClientMixin{

目前創(chuàng)新互聯(lián)建站已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管維護、企業(yè)網(wǎng)站設(shè)計、貢井網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

@protected

bool get wantKeepAlive=true;

//其他邏輯

}

方法二： 使用IndexedStack存儲頁面

_body = IndexedStack(

children: Widget[

BookHousePage(),

FunctionPage(),

ChatPage(),

MinePage()

],

index: _currentPageIndex,

);

Flutter：State生命周期以及頁面重載問題詳解

這里需要混入WidgetsBindingObserver，重寫didChangeAppLifecycleState方法才能看到app進入前后臺的狀態(tài)

我這邊使用的是一個嵌套行頁面，主頁面(TabBarViewPage)是一個TabBar+TabBarView實現(xiàn)的子頁面切換，子頁面是三個頁面(HomeItemPage,EmailItemPage,MineItemPage)

子頁面互相切換的時候下一個頁面創(chuàng)建，上一個頁面就會被銷毀，這是flutter默認的情況，頁面會被移除然后重載。當然你也可以設(shè)置需要的頁面不被重載的頁面，這個后面再講

解決頁面重載需要三步

可以看到home并沒有被銷毀也沒有重載，但是mail被銷毀了然后重載了

可以看到當主頁面銷毀的時候，home也是被銷毀的

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時再移除這個蒙層。

flutter 完全使用GetX 主題切換 以及 自創(chuàng)建Widget的顏色隨主題變化方案

這篇將會解決手動切換主題以及跟隨手機切換主題來更新UI(包括自己創(chuàng)建的Widget)

主題切換有個問題，就是如果是我們自定義或者在 build() 自己創(chuàng)建的部件是不會隨著系統(tǒng)的主題切換而發(fā)生主題色變化的(實際測試中，如果頁面在頂層(沒有被push)切換主題并不會觸發(fā) build() 方法,(push之后的頁面切換系統(tǒng)主題是可以觸發(fā) build() 的,而且會頻繁觸發(fā)好多次...)，既然無法通過重新 build 更新組件的主題色，那么我們在切換主題后，強制觸發(fā)整個app的 build() 就可以了)

iOS開發(fā)Flutter探索-State狀態(tài)保存(10)

有時候我們不希望某個頁面每次打開時都重新加載，比如就我們之前的Tabbar結(jié)構(gòu)的頁面，每當我們在切換Tab的時候都會執(zhí)行 void initState() ，這就意味著頁面每次都會重新渲染，之所以這樣就是因為我們的 State 狀態(tài)沒有保存，如下圖所示：

[沒有狀態(tài)保存效果圖]

給當前 State 類添加一個擴展(這里就用擴展這個詞吧，其實類似于iOS下的 Category )，一個系統(tǒng)的擴展類 AutomaticKeepAliveClientMixin ，并重寫 wantKeepAlive 方法，讓一個普通的 State 類，具有保存狀態(tài)的能力。

在Dart語法中通過使用 with 關(guān)鍵字來添加擴展：

bool get wantKeepAlive = true; 之后，當前 State 就具備保存能力了，也就意味著重復切換Tab后， void initState() 就不會重復執(zhí)行了（由原來的 viewWillAppear() 變成了 viewDidLoad() ）。

按照上面方式修改后，發(fā)現(xiàn)切換Tab后 void initState() 依然重復執(zhí)行了，這是為什么吶？這里我們看下我們之前 root_page.dart 里面是如何配置我們的tabbar結(jié)構(gòu)的：

這里我們是通過一個 _viewControllers 的List，把4個子頁面放在了里面，全局有一個 _currentIndex ，當 onTap 回調(diào)后后，更新 _currentIndex 的值，執(zhí)行 setState () 后， body 對應(yīng)的 widget 頁面發(fā)生改變。而問題也就出在這里，當 body 部分發(fā)生改變時，根據(jù)Flutter的底層渲染邏輯，這里會移除掉之前的 Widget ，并重新創(chuàng)建新的 Widget ，我們之前在 _viewControllers 放的子頁面，并不像iOS下是一個實例對象，存在就直接拿來使用。在Flutter 中 setState () 后界面會被重新繪制，而 body 部分只知道我要渲染一個什么樣的 widget ，而該類型的 widget 每次都是會重新創(chuàng)建，這也就意味著我們在Tab切換時，每次都是重新創(chuàng)建，所以每次都執(zhí)行了 initState() 。

顯然我們現(xiàn)在的方式是不合理的，那在Flutter中如何管理這樣的子頁面，而避免重復渲染吶？

這就要用到一個新的部件了： PageView() ,內(nèi)部的2個關(guān)鍵屬性：

子頁面切換通過 _controller.jumpToPage(index); 來實現(xiàn)。

這樣子頁面也就不會重新創(chuàng)建渲染了，我們的狀態(tài)保存也就能正常實現(xiàn)了。

學習是一個循序漸進的過程，我們總是在踩坑中不斷的前行，把坑填平了也就意味著我們在這個新的東西面前立了足，就可能進行更多為什么的探索了。

本文題目：flutter頁面切換,flutter 頁面特效
網(wǎng)頁鏈接：http://muchs.cn/article16/phjjgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、建站公司、搜索引擎優(yōu)化、服務(wù)器托管、網(wǎng)站策劃、用戶體驗

廣告

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