Flutter實現(xiàn)頁面切換后保持原頁面狀態(tài)的3種方法

前言：

成都創(chuàng)新互聯(lián)公司主打移動網(wǎng)站、做網(wǎng)站、成都網(wǎng)站設(shè)計、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、域名申請、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再決定采用什么樣的設(shè)計。最后，要實現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計，我們還會規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。

在Flutter應(yīng)用中，導(dǎo)航欄切換頁面后默認(rèn)情況下會丟失原頁面狀態(tài)，即每次進(jìn)入頁面時都會重新初始化狀態(tài)，如果在initState中打印日志，會發(fā)現(xiàn)每次進(jìn)入時都會輸出，顯然這樣增加了額外的開銷，并且?guī)砹瞬缓玫挠脩趔w驗。
在正文之前，先看一些常見的App導(dǎo)航，以喜馬拉雅FM為例:

它擁有一個固定的底部導(dǎo)航以及首頁的頂部導(dǎo)航，可以看到不管是點擊底部導(dǎo)航切換頁面還是在首頁左右側(cè)滑切換頁面，之前的頁面狀態(tài)都是始終維持的，下面就具體介紹下如何在flutter中實現(xiàn)類似喜馬拉雅的導(dǎo)航效果

第一步：實現(xiàn)固定的底部導(dǎo)航

在通過flutter create生成的項目模板中,我們先簡化一下代碼，將MyHomePage提取到一個單獨的home.dart文件，并在Scaffold腳手架中添加bottomNavigationBar底部導(dǎo)航，在body中展示當(dāng)前選中的子頁面。

/// home.dart
import 'package:flutter/material.dart';

import './pages/first_page.dart';
import './pages/second_page.dart';
import './pages/third_page.dart';

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 final items = [
 BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首頁')),
 BottomNavigationBarItem(icon: Icon(Icons.music_video), title: Text('聽')),
 BottomNavigationBarItem(icon: Icon(Icons.message), title: Text('消息'))
 ];

 final bodyList = [FirstPage(), SecondPage(), ThirdPage()];

 int currentIndex = 0;

 void onTap(int index) {
 setState(() {
 currentIndex = index;
 });
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
  title: Text('demo'),
 ),
 bottomNavigationBar: BottomNavigationBar(
  items: items,
  currentIndex: currentIndex, 
  onTap: onTap
 ),
 body: bodyList[currentIndex]
 );
 }
}

其中的三個子頁面結(jié)構(gòu)相同，均顯示一個計數(shù)器和一個加號按鈕，以first_page.dart為例：

/// first_page.dart
import 'package:flutter/material.dart';

class FirstPage extends StatefulWidget {
 @override
 _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
 int count = 0;

 void add() {
 setState(() {
 count++;
 });
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: Center(
  child: Text('First: $count', style: TextStyle(fontSize: 30))
 ),
 floatingActionButton: FloatingActionButton(
  onPressed: add,
  child: Icon(Icons.add),
 )
 );
 }
}

當(dāng)前效果如下：

Flutter實現(xiàn)頁面切換后保持原頁面狀態(tài)的3種方法

可以看到，從第二頁切換回第一頁時，第一頁的狀態(tài)已經(jīng)丟失

第二步：實現(xiàn)底部導(dǎo)航切換時保持原頁面狀態(tài)

可能有些小伙伴在搜索后會開始直接使用官方推薦的AutomaticKeepAliveClientMixin，通過在子頁面的State類重寫wantKeepAlive為true 。然而，如果你的代碼和我上面的類似，body中并沒有使用PageView或TabBarView，很不幸的告訴你，踩到坑了，這樣是無效的，原因后面再詳述。現(xiàn)在我們先來介紹另外兩種方式：

① 使用IndexedStack實現(xiàn)

IndexedStack繼承自Stack，它的作用是顯示第index個child，其它child在頁面上是不可見的，但所有child的狀態(tài)都被保持，所以這個Widget可以實現(xiàn)我們的需求，我們只需要將現(xiàn)在的body用IndexedStack包裹一層即可

/// home.dart
class _MyHomePageState extends State<MyHomePage> {
 ...
 ...
 ...
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
  title: Text('demo'),
 ),
 bottomNavigationBar: BottomNavigationBar(
  items: items, currentIndex: currentIndex, onTap: onTap),
 // body: bodyList[currentIndex]
 body: IndexedStack(
  index: currentIndex,
  children: bodyList,
 ));
 }

保存后再次測試一下

Flutter實現(xiàn)頁面切換后保持原頁面狀態(tài)的3種方法

② 使用Offstage實現(xiàn)

Offstage的作用十分簡單，通過一個參數(shù)來控制child是否顯示，所以我們同樣可以組合使用Offstage來實現(xiàn)該需求，其實現(xiàn)原理與IndexedStack類似

/// home.dart
class _MyHomePageState extends State<MyHomePage> {
 ...
 ...
 ...
 @override
 Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
   title: Text('demo'),
  ),
  bottomNavigationBar: BottomNavigationBar(
   items: items, currentIndex: currentIndex, onTap: onTap),
  // body: bodyList[currentIndex],
  body: Stack(
   children: [
   Offstage(
    offstage: currentIndex != 0,
    child: bodyList[0],
   ),
   Offstage(
    offstage: currentIndex != 1,
    child: bodyList[1],
   ),
   Offstage(
    offstage: currentIndex != 2,
    child: bodyList[2],
   ),
   ],
  ));
 }
}

在上面的兩種方式中都可以實現(xiàn)保持原頁面狀態(tài)的需求，但這里有一些開銷上的問題，有經(jīng)驗的小伙伴應(yīng)該能發(fā)現(xiàn)當(dāng)應(yīng)用第一次加載的時候，所有子頁狀態(tài)都被實例化了（>這里的細(xì)節(jié)并不是因為我直接把子頁實例化放在bodyList里...<），如果在子頁State的initState中打印日志，可以在終端看到一次性輸出了所有子頁的日志。下面就介紹另一種通過繼承AutomaticKeepAliveClientMixin的方式來更好的實現(xiàn)保持狀態(tài)。

第三步：實現(xiàn)首頁的頂部導(dǎo)航

首先我們通過配合使用TabBar+TabBarView+AutomaticKeepAliveClientMixin來實現(xiàn)頂部導(dǎo)航（注意：TabBar和TabBarView需要提供controller，如果自己沒有定義，則必須使用DefaultTabController包裹）。此處也可以選擇使用PageView，后面會介紹。

我們先在home.dart文件移除Scaffold腳手架中的appBar頂部工具欄，然后開始重寫首頁first_page.dart:

/// first_page.dart
import 'package:flutter/material.dart';

import './recommend_page.dart';
import './vip_page.dart';
import './novel_page.dart';
import './live_page.dart';

class _TabData {
 final Widget tab;
 final Widget body;
 _TabData({this.tab, this.body});
}

final _tabDataList = <_TabData>[
 _TabData(tab: Text('推薦'), body: RecommendPage()),
 _TabData(tab: Text('VIP'), body: VipPage()),
 _TabData(tab: Text('小說'), body: NovelPage()),
 _TabData(tab: Text('直播'), body: LivePage())
];

class FirstPage extends StatefulWidget {
 @override
 _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
 final tabBarList = _tabDataList.map((item) => item.tab).toList();
 final tabBarViewList = _tabDataList.map((item) => item.body).toList();

 @override
 Widget build(BuildContext context) {
 return DefaultTabController(
  length: tabBarList.length,
  child: Column(
   children: <Widget>[
   Container(
    width: double.infinity,
    height: 80,
    padding: EdgeInsets.fromLTRB(20, 24, 0, 0),
    alignment: Alignment.centerLeft,
    color: Colors.black,
    child: TabBar(
     isScrollable: true,
     indicatorColor: Colors.red,
     indicatorSize: TabBarIndicatorSize.label,
     unselectedLabelColor: Colors.white,
     unselectedLabelStyle: TextStyle(fontSize: 18),
     labelColor: Colors.red,
     labelStyle: TextStyle(fontSize: 20),
     tabs: tabBarList),
   ),
   Expanded(
    child: TabBarView(
    children: tabBarViewList,
    // physics: NeverScrollableScrollPhysics(), // 禁止滑動
   ))
   ],
  ));
 }
}

其中推薦頁、VIP頁、小說頁、直播頁的結(jié)構(gòu)仍和之前的首頁結(jié)構(gòu)相同，僅顯示一個計數(shù)器和一個加號按鈕，以推薦頁recommend_page.dart為例：

/// recommend_page.dart
import 'package:flutter/material.dart';

class RecommendPage extends StatefulWidget {
 @override
 _RecommendPageState createState() => _RecommendPageState();
}

class _RecommendPageState extends State<RecommendPage> {
 int count = 0;

 void add() {
 setState(() {
  count++;
 });
 }
 
 @override
 void initState() {
 super.initState();
 print('recommend initState');
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  body:Center(
   child: Text('首頁推薦: $count', style: TextStyle(fontSize: 30))
  ),
  floatingActionButton: FloatingActionButton(
   onPressed: add,
   child: Icon(Icons.add),
  ));
 }
}

保存后測試，

Flutter實現(xiàn)頁面切換后保持原頁面狀態(tài)的3種方法

可以看到，現(xiàn)在添加了首頁頂部導(dǎo)航，且默認(rèn)支持左右側(cè)滑，接下來再進(jìn)一步的完善狀態(tài)保持

第四步：實現(xiàn)首頁頂部導(dǎo)航切換時保持原頁面狀態(tài)

③ 使用AutomaticKeepAliveClientMixin實現(xiàn)

寫到這里已經(jīng)很簡單了，我們只需要在首頁導(dǎo)航內(nèi)需要保持頁面狀態(tài)的子頁State中，繼承AutomaticKeepAliveClientMixin并重寫wantKeepAlive為true即可。

notes：Subclasses must implement wantKeepAlive, and their build methods must call super.build (the return value will always return null, and should be ignored)

以首頁推薦recommend_page.dart為例：

/// recommend_page.dart
import 'package:flutter/material.dart';

class RecommendPage extends StatefulWidget {
 @override
 _RecommendPageState createState() => _RecommendPageState();
}

class _RecommendPageState extends State<RecommendPage>
 with AutomaticKeepAliveClientMixin {
 int count = 0;

 void add() {
 setState(() {
  count++;
 });
 }

 @override
 bool get wantKeepAlive => true;

 @override
 void initState() {
 super.initState();
 print('recommend initState');
 }

 @override
 Widget build(BuildContext context) {
 super.build(context);
 return Scaffold(
  body:Center(
   child: Text('首頁推薦: $count', style: TextStyle(fontSize: 30))
  ),
  floatingActionButton: FloatingActionButton(
   onPressed: add,
   child: Icon(Icons.add),
  ));
 }
}

再次保存測試，

Flutter實現(xiàn)頁面切換后保持原頁面狀態(tài)的3種方法

現(xiàn)在已經(jīng)可以看到，不管是切換底部導(dǎo)航還是切換首頁頂部導(dǎo)航，所有的頁面狀態(tài)都可以被保持，并且在應(yīng)用第一次加載時，終端只看到recommend initState的日志，第一次切換首頁頂部導(dǎo)航至vip頁面時，終端輸出vip initState，當(dāng)再次返回推薦頁時，不再輸出recommend initState。

所以，使用TabBarView+AutomaticKeepAliveClientMixin這種方式既實現(xiàn)了頁面狀態(tài)的保持，又具有類似惰性求值的功能，對于未使用的頁面狀態(tài)不會進(jìn)行實例化，減小了應(yīng)用初始化時的開銷。

更新

前面在底部導(dǎo)航介紹了使用IndexedStack和Offstage兩種方式實現(xiàn)保持頁面狀態(tài)，但它們的缺點在于第一次加載時便實例化了所有的子頁面State。為了進(jìn)一步優(yōu)化，下面我們使用PageView+AutomaticKeepAliveClientMixin重寫之前的底部導(dǎo)航，其中PageView和TabBarView的實現(xiàn)原理類似，具體選擇哪一個并沒有強(qiáng)制要求。更新后的home.dart文件如下：

/// home.dart
import 'package:flutter/material.dart';

import './pages/first_page.dart';
import './pages/second_page.dart';
import './pages/third_page.dart';

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 final items = [
 BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首頁')),
 BottomNavigationBarItem(icon: Icon(Icons.music_video), title: Text('聽')),
 BottomNavigationBarItem(icon: Icon(Icons.message), title: Text('消息'))
 ];

 final bodyList = [FirstPage(), SecondPage(), ThirdPage()];

 final pageController = PageController();

 int currentIndex = 0;

 void onTap(int index) {
 pageController.jumpToPage(index);
 }

 void onPageChanged(int index) {
 setState(() {
  currentIndex = index;
 });
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  bottomNavigationBar: BottomNavigationBar(
   items: items, currentIndex: currentIndex, onTap: onTap),
  // body: bodyList[currentIndex],
  body: PageView(
   controller: pageController,
   onPageChanged: onPageChanged,
   children: bodyList,
   physics: NeverScrollableScrollPhysics(), // 禁止滑動
  ));
 }
}

然后在bodyList的子頁State中繼承AutomaticKeepAliveClientMixin并重寫wantKeepAlive，以second_page.dart為例：

/// second_page.dart
import 'package:flutter/material.dart';

class SecondPage extends StatefulWidget {
 @override
 _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage>
 with AutomaticKeepAliveClientMixin {
 int count = 0;

 void add() {
 setState(() {
  count++;
 });
 }

 @override
 bool get wantKeepAlive => true;
 
 @override
 void initState() {
 super.initState();
 print('second initState');
 }

 @override
 Widget build(BuildContext context) {
 super.build(context);
 return Scaffold(
  body: Center(
   child: Text('Second: $count', style: TextStyle(fontSize: 30))
  ),
  floatingActionButton: FloatingActionButton(
   onPressed: add,
   child: Icon(Icons.add),
  ));
 }
}

Ok，更新后保存運(yùn)行，應(yīng)用第一次加載時不會輸出second initState，僅當(dāng)?shù)谝淮吸c擊底部導(dǎo)航切換至該頁時，該子頁的State被實例化。

至此，如何實現(xiàn)一個類似的底部 + 首頁頂部導(dǎo)航完結(jié) ~

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。

當(dāng)前文章：Flutter實現(xiàn)頁面切換后保持原頁面狀態(tài)的3種方法
文章轉(zhuǎn)載：http://muchs.cn/article6/joosog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站制作、小程序開發(fā)、標(biāo)簽優(yōu)化、定制網(wǎng)站、網(wǎng)頁設(shè)計公司

聲明：本網(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)

猜你還喜歡下面的內(nèi)容