Flutter实现页面切换后保持原页面状态的3种方法-创新互联

前言：

成都创新互联-专业网站定制、快速模板网站建设、高性价比利津网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式利津网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖利津地区。费用合理售后完善，十年实体公司更值得信赖。

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

它拥有一个固定的底部导航以及首页的顶部导航，可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面，之前的页面状态都是始终维持的，下面就具体介绍下如何在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 {
 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]
 );
 }
}

本文标题：Flutter实现页面切换后保持原页面状态的3种方法-创新互联
本文地址：http://cdkjz.cn/article/pecie.html