Flutter 三种方式实现页面切换后保持原页面状态

分类：Flutter作者：编程之家用户

前言：

在Flutter应用中，导航栏切换页面后默认情况下会丢失原页面状态，即每次进入页面时都会重新初始化状态，如果在initState中打印日志，会发现每次进入时都会输出，显然这样增加了额外的开销，并且带来了不好的用户体验。
在正文之前，先看一些常见的App导航，以喜马拉雅FM为例:

image.png

它拥有一个固定的底部导航以及首页的顶部导航，可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面，之前的页面状态都是始终维持的，下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果

第一步：实现固定的底部导航

在通过flutter create生成的项目模板中,我们先简化一下代码，将MyHomePage提取到一个单独的home.dart文件，并在Scaffold脚手架中添加bottomNavigationBar底部导航，在body中展示当前选中的子页面。

/// 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]
    );
  }
}

其中的三个子页面结构相同，均显示一个计数器和一个加号按钮，以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),
        )
    );
  }
}

当前效果如下：

image.png

可以看到，从第二页切换回第一页时，第一页的状态已经丢失

第二步：实现底部导航切换时保持原页面状态

可能有些小伙伴在搜索后会开始直接使用官方推荐的AutomaticKeepAliveClientMixin，通过在子页面的State类重写wantKeepAlive为true 。 然而，如果你的代码和我上面的类似，body中并没有使用PageView或TabBarView，很不幸的告诉你，踩到坑了，这样是无效的，原因后面再详述。现在我们先来介绍另外两种方式：

  1. 使用IndexedStack实现
    IndexedStack继承自Stack，它的作用是显示第index个child，其它child在页面上是不可见的，但所有child的状态都被保持，所以这个Widget可以实现我们的需求，我们只需要将现在的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,
        ));
  }

保存后再次测试一下

image.png

  1. 使用Offstage实现

Offstage的作用十分简单，通过一个参数来控制child是否显示，所以我们同样可以组合使用Offstage来实现该需求，其实现原理与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],
            ),
          ],
        ));
  }
}

在上面的两种方式中都可以实现保持原页面状态的需求，但这里有一些开销上的问题，有经验的小伙伴应该能发现当应用第一次加载的时候，所有子页状态都被实例化了（>这里的细节并不是因为我直接把子页实例化放在bodyList里…<），如果在子页State的initState中打印日志，可以在终端看到一次性输出了所有子页的日志。下面就介绍另一种通过继承AutomaticKeepAliveClientMixin的方式来更好的实现保持状态。

第三步：实现首页的顶部导航

首先我们通过配合使用TabBar+TabBarView+AutomaticKeepAliveClientMixin来实现顶部导航（注意：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页、小说页、直播页的结构仍和之前的首页结构相同，仅显示一个计数器和一个加号按钮，以推荐页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),
        ));
  }
}

保存后测试，

image.png

可以看到，现在添加了首页顶部导航，且默认支持左右侧滑，接下来再进一步的完善状态保持

第四步：实现首页顶部导航切换时保持原页面状态

  1. 使用AutomaticKeepAliveClientMixin实现

写到这里已经很简单了，我们只需要在首页导航内需要保持页面状态的子页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),
        ));
  }
}

再次保存测试，

image.png

现在已经可以看到，不管是切换底部导航还是切换首页顶部导航，所有的页面状态都可以被保持，并且在应用第一次加载时，终端只看到recommend initState的日志，第一次切换首页顶部导航至vip页面时，终端输出vip initState，当再次返回推荐页时，不再输出recommend initState。

所以，使用TabBarView+AutomaticKeepAliveClientMixin这种方式既实现了页面状态的保持，又具有类似惰性求值的功能，对于未使用的页面状态不会进行实例化，减小了应用初始化时的开销。

更新

前面在底部导航介绍了使用IndexedStack和Offstage两种方式实现保持页面状态，但它们的缺点在于第一次加载时便实例化了所有的子页面State。为了进一步优化，下面我们使用PageView+AutomaticKeepAliveClientMixin重写之前的底部导航，其中PageView和TabBarView的实现原理类似，具体选择哪一个并没有强制要求。更新后的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，更新后保存运行，应用第一次加载时不会输出second initState，仅当第一次点击底部导航切换至该页时，该子页的State被实例化。

读者福利

Android架构师的门槛，有没有免费学习资料？

加入Android高级架构群；1007478004，免费提供视频和资料，一起学习，相互讨论。

在这里插入图片描述

原文地址：https://blog.csdn.net/qq_43580100/article/details/90180698

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Flutter Component动画的显和隐怎么实现
这篇文章主要讲解了“FlutterComponent动画的显和隐怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究...
flutter微信聊天输入框功能如何实现
这篇文章主要讲解了“flutter微信聊天输入框功能如何实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“f...
Flutter之Navigator的高级用法有哪些
本篇内容介绍了“Flutter之Navigator的高级用法有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处...
Flutter怎么使用Android原生播放器
这篇文章主要介绍“Flutter怎么使用Android原生播放器”，在日常操作中，相信很多人在Flutter怎么使用Android原生播放器问题上存在疑惑，小编查阅了各式资料，整...
Flutter开发的android端如何修改APP名称，logo，版本号
Flutter开发的android端如何修改APP名称，logo，版本号，具体的操作步骤：修改APP名称找到文件：android\\app\\src\\main\\AndroidManifest.xml
Flutter系列-flutter路由管理
Flutter路由管理初识路由概念一.路由管理1.1.Route1.2.MaterialPageRoute1.3.Navigator1.4.路由传值1.5 命名路由1.6.命名路由参数传递1.7.适配二、路由钩子三、onUnknownRoute四、结尾初识路由概念路由的概念由来已久，包括网络路由、后端路由，到现在广为流行的前端路由。无论路由的概念如何应用，它的核心是一个路由映射表。比如：名字 detail 映射到 DetailPage 页面等。有了这个映射表之后，我们就可以方便的根据名字来完成路由的转发
Flutter系列-搭建Flutter开发环境
前提：针对Android开发者（windows系统下），已安装Git，AndroidStudio(建议4.0+版本)一.下载Flutter SDK地址：https://flutter.dev/docs/development/tools/sdk/releases，在 Stable channel (Windows)里面下最新版本即可。Flutter的渠道版本会不停变动，请以Flutter官网为准。在中国，要想正常获取安装包列表或下载安装包，可能需要翻墙，也可以去Flutter github项目下去下载安
Flutter系列-Dart基础语法学习
一、变量变量是一个引用，根据Dart中“万物皆对象”原则，即变量存储的都是对象的引用，或者说它们都是指向对象。1.1.声明变量：//1.不指定类型var name = 'aaa';//2.明确指定类型String name = 'aaa';因为有类型推导，所以两种实现效果一样，官方推荐在函数内的本地变量尽量使用var声明。在变量类型并不明确的情况下，可以使用dynamic关键字//3.使用dynamic关键字dynamic name = 'aaa';1.2.默认值未初始化的变量
Flutter2.0运行在web上不同渲染器的问题
前言Flutter2.0发布不久，对web的支持刚刚进入stable阶段。初学几天，构建web应用时候碰到一些问题，比如中文显示成乱码，然后加载图片出现图片跨域问题：Failed to load network image...Trying to load an image from another domain?1.开启web端构建：使用下面这个命令才可以开启Web端构建的支持flutter config --enable-web提示我们：重新启动编辑器，以便它们读取新设置。2.重
Flutter打release包以及release包无法访问网络问题记录
一.Flutter打Android release包的步骤：1.为项目创建一个.jks签名文件（很简单，跳过）2.创建一个文件key.properties，直接复制下面key.properties位置如图：在里面输入一下内容：storePassword=iflytekkeyPassword=iflytekkeyAlias=teachingmachinestoreFile=E:/teacher/app/keys/TeachingMachine.jks输入你自己的passwork以及
React Native之Android原生通过DeviceEventEmitter发送消息给js
1 问题Android原生向js发消息,并且可以携带数据2 实现原理Android原生可以使用RCTEventEmitter来注册事件,然后这里需要指定事件的名字,然后在js那端进行监听同样事件的名字监听,就可以收到消息得到数据Android注册关键代码reactContext.getJSModule(DeviceEventManagerModule.RCT...
React Native之Flexbox布局和监测文本输入onChangeText
1 Flexbox布局1) flexDirection 可以决定布局的主轴,子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列2) justifyContent 决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式 有flex-start、center、flex-end、space-around...
React Native之通过createStackNavigator实现携带参数的页面与页面之间的跳转
1 实现的功能在网上看React Native文档,我特码就想实现一个页面到另外一个页面的跳转,然后另外一个页面怎么获取参数,特么没找到一个说清楚的,要么太复杂,要么说了不理解,下面是我自己写的一个App.js文件,实现一个Home页面跳到另外Details页面,并且携带了参数怎么在Details页面获取,就是这么简单粗暴.2 测试DemoApp.js文件如下...
React Native之最构建对象通过构造方法传递值然后再获取值
1 问题在一个文件构建一个对象,然后在另外一个文件里面new这个对象,通过构造方法传递参数,然后再获取这个参数2 测试代码Student.js文件如下'use strict';import React from 'react'import {NativeModules, NativeEventEmitter, DeviceEventEmitter,Ale...
React Native之内部方法常用几种写法和调用规则
1 简单部分代码export default class App extends Component&amp;lt;Props&amp;gt; { render() { return ( &amp;lt;View {styles.container}&amp;gt; &amp;lt;View {styles.welcome}&amp;gt; &amp;l...
React Native之通过DeviceEventEmitter发送和接收事件
1 怎么实现发送和接收事件理论上封装了Android原生广播的代码,需要注册和反注册,这里用DeviceEventEmitter实现//增加监听DeviceEventEmitter.addListener//取消监听//this.emitter.remove();这里可也可以通过安卓原生向页面js发送消息,可以参考我的这篇博客React Native之Android原生通过Dev...
React Native之组件(Component)生命周期学习笔记
1、Component介绍一般Component需要被其它类进行继承，Component和Android一样，也有生命周期英文图片如下2 具体说明1)、挂载阶段constructor()//构造函数,声明之前先调用super(props)componentWillMount()//因为它发生在render()方法前，因此在该方法内同步设置状态...
React Native之触摸事件(Touchable系列和onLongPress)
1 触摸事件普通点击我们可以使用onPress方法,我们可以使用Touchable 系列控件设计我们的按钮TouchableHighlight 背景会在用户手指按下时变暗TouchableNativeFeedback用户手指按下时形成类似墨水涟漪的视觉效果TouchableOpacity指按下时降低按钮的透明度，而不会改变背景的颜色TouchableWithoutFeedbac...
React Native之编译提示Only one default export allowed per module.
1 问题部分代码如下class HomeScreen extends React.Component { render() { return ( &amp;lt;View {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&amp;gt; &amp;lt;Text&amp;gt;Home Scre...
React Native之Props(属性)和State(状态)和简单样式简单使用
1 Props(属性)和State(状态)和简单样式简单使用App.js代码如下/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, {Component} from 'react';import {Pla...
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot