切换页面保持数据持久化

lib/main.dart

@@ -2,11 +2,4 @@ import 'package:flutter/material.dart';
 
 import 'pages/page_entry.dart';
 
-void main() => runApp(new MyApp());
-
-class MyApp extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return PageEntry();
-  }
-}
+void main() => runApp(PageEntry());

lib/pages/article/article_detail.dart

@@ -6,31 +6,20 @@ import '../../utils/article_utils.dart';
 
 Dio dio = Dio();
 
-class ArticleDetailPage extends StatelessWidget {
+class ArticleDetailPage extends StatefulWidget {
   final articleId;
 
   ArticleDetailPage(this.articleId);
 
   @override
-  Widget build(BuildContext context) {
-    return ArticleDetail(this.articleId);
-  }
-}
-
-class ArticleDetail extends StatefulWidget {
-  final articleId;
-
-  ArticleDetail(this.articleId);
-
-  @override
-  createState() => ArticleDetailState(this.articleId);
+  createState() => _ArticleDetailState(this.articleId);
 }
 
-class ArticleDetailState extends State {
+class _ArticleDetailState extends State {
   final articleId;
   Map articleDetail;
 
-  ArticleDetailState(this.articleId) {
+  _ArticleDetailState(this.articleId) {
     this._fetchArticleDetail();
   }
 

lib/pages/article/article_list.dart

@@ -6,23 +6,16 @@ import '../../utils/article_utils.dart';
 
 Dio dio = Dio();
 
-class ArticleListPage extends StatelessWidget {
+class ArticleListPage extends StatefulWidget {
   @override
-  Widget build(BuildContext context) {
-    return ArticleList();
-  }
-}
-
-class ArticleList extends StatefulWidget {
-  @override
-  createState() => ArticleListState();
+  createState() => _ArticleListState();
 }
 
-class ArticleListState extends State {
+class _ArticleListState extends State {
   final articleList = [];
   final articleTags = [];
   var realArticleList = [];
-  ArticleListState() {
+  _ArticleListState() {
     this._fetchArticleData();
   }
   void _fetchArticleData() async {

lib/pages/curriculum_vitae.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
 
-const FULL_STAR = 5;
+const int FULL_STAR = 5;
 
 class CurriculumVitaePage extends StatelessWidget {
   List<Widget> _buildBodyCardList() {
-    return [ SkillListWidget() ];
+    return [ _SkillListWidget() ];
   }
 
   Widget _buildBody() {
@@ -119,12 +119,12 @@ class CurriculumVitaePage extends StatelessWidget {
   }
 }
 
-class SkillListWidget extends StatefulWidget {
+class _SkillListWidget extends StatefulWidget {
   @override
-  createState() => SkillListState();
+  createState() => _SkillListState();
 }
 
-class SkillListState extends State {
+class _SkillListState extends State {
   final List<Map> skillList = [{
     'title': 'Skill',
     'isExpanded': true,

lib/pages/page_entry.dart

@@ -2,51 +2,50 @@ import 'package:flutter/material.dart';
 
 // 底部 Tabbar 映射到的所有 Page
 import 'article/article_list.dart';
+import 'sports/index.dart';
 import 'curriculum_vitae.dart';
 
-class PageEntry extends StatelessWidget {
+class PageEntry extends StatefulWidget {
   @override
-  Widget build(BuildContext context) {
-    return PageEntryWidget();
-  }
+  createState() => _PageEntryState();
 }
 
-class PageEntryWidget extends StatefulWidget {
-  @override
-  createState() => PageEntryState();
-}
-
-class PageEntryState extends State {
-  var _index = 0;
-  var _body = [
+class _PageEntryState extends State {
+  int _index = 0;
+  final _body = [
     ArticleListPage(),
-    null,
-    CurriculumVitaePage()
+    SportsIndexPage(),
+    CurriculumVitaePage(),
   ];
 
-  Widget getBottomNav(int index) {
-    return BottomNavigationBar(
-      currentIndex: index,
-      onTap: (int index) {
-        setState(() {
-          _index = index;
-        });
-      },
-      items: <BottomNavigationBarItem>[
-        BottomNavigationBarItem(
-          icon: new Icon(Icons.book),
-          title: new Text('Blog'),
-        ),
-        BottomNavigationBarItem(
-          icon: new Icon(Icons.image),
-          title: new Text('没开通'),
-        ),
-        BottomNavigationBarItem(
-          icon: new Icon(Icons.work),
-          title: new Text('CV'),
-        ),
-      ],
-    );
+  // 插入渲染树时调用，只调用一次
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  // state 依赖的对象发生变化时调用
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+  }
+
+  // 组件状态改变时候调用，可能会调用多次
+  @override
+  void didUpdateWidget(StatefulWidget widget) {
+    super.didUpdateWidget(widget);
+  }
+
+  // 当移除渲染树的时候调用
+  @override
+  void deactivate() {
+    super.deactivate();
+  }
+
+  // 组件即将销毁时调用
+  @override
+  void dispose() {
+    super.dispose();
   }
 
   @override
@@ -56,8 +55,55 @@ class PageEntryState extends State {
         primaryColor: Colors.pink,
       ),
       home: Scaffold(
-        body: _body[_index],
-        bottomNavigationBar: getBottomNav(_index),
+        /** 页面无法持久化 */
+        // body: _body[_index],
+
+        /** 报错 */
+        // body: IndexedStack(
+        //   index: _index,
+        //   children: _body,
+        // ),
+
+        /** 保持页面持久化，但是会实例化所有子页面，性能开销有问题。而且这里不能提出成一个函数返回值？ */
+        /** 高效的页面持久化方案见 pages/sports */
+        body: Stack(
+          children: [
+            Offstage(
+              offstage: _index != 0,
+              child: _body[0],
+            ),
+            Offstage(
+              offstage: _index != 1,
+              child: _body[1],
+            ),
+            Offstage(
+              offstage: _index != 2,
+              child: _body[2],
+            ),
+          ],
+        ),
+        bottomNavigationBar: BottomNavigationBar(
+          currentIndex: _index,
+          onTap: (int index) {
+            setState(() {
+              _index = index;
+            });
+          },
+          items: <BottomNavigationBarItem>[
+            BottomNavigationBarItem(
+              icon: Icon(Icons.book),
+              title: Text('Blog'),
+            ),
+            BottomNavigationBarItem(
+              icon: Icon(Icons.image),
+              title: Text('Sports'),
+            ),
+            BottomNavigationBarItem(
+              icon: Icon(Icons.work),
+              title: Text('Cv'),
+            ),
+          ],
+        ),
       ),
     );
   }

lib/pages/sports/index.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+
+import './run.dart';
+
+// page_entry 中的页面切换直接使用的 stack，性能存在问题，在此模板中尝试下 TabBar+TabBarView+AutomaticKeepAliveClientMixin
+
+class _TabChoice {
+  final String title;
+  final IconData icon;
+  const _TabChoice({this.title, this.icon});
+}
+
+const List<_TabChoice> _tabChoiceList = <_TabChoice>[
+  _TabChoice(title: '跑步',icon: Icons.directions_run),
+  _TabChoice(title: '徒步', icon: Icons.directions_walk),
+  _TabChoice(title: '跑步',icon: Icons.directions_run),
+  _TabChoice(title: '徒步', icon: Icons.directions_walk),
+  _TabChoice(title: '跑步',icon: Icons.directions_run),
+  _TabChoice(title: '徒步', icon: Icons.directions_walk),
+  _TabChoice(title: '跑步',icon: Icons.directions_run),
+  _TabChoice(title: '徒步', icon: Icons.directions_walk),
+  _TabChoice(title: '跑步',icon: Icons.directions_run),
+  _TabChoice(title: '徒步', icon: Icons.directions_walk),
+  _TabChoice(title: '跑步',icon: Icons.directions_run),
+  _TabChoice(title: '徒步', icon: Icons.directions_walk),
+  _TabChoice(title: '跑步',icon: Icons.directions_run),
+  _TabChoice(title: '徒步', icon: Icons.directions_walk),
+  _TabChoice(title: '跑步',icon: Icons.directions_run),
+  _TabChoice(title: '徒步', icon: Icons.directions_walk),
+];
+
+class SportsIndexPage extends StatefulWidget {
+  @override
+  createState() => _SportsIndexState();
+}
+
+class _SportsIndexState extends State {
+  @override
+  Widget build(BuildContext context) {
+    return DefaultTabController(
+      child: Scaffold(
+        appBar: AppBar(
+          title: Text('运动模块'),
+          bottom: TabBar(
+            isScrollable: true,
+            tabs: _tabChoiceList.map((choice) {
+              return Tab(
+                text: choice.title,
+                icon: Icon(choice.icon),
+              );
+            }).toList(),
+          ),
+        ),
+        body: TabBarView(
+          children: _tabChoiceList.map((choice) {
+            return SportsRunPage();
+          }).toList(),
+        ),
+      ),
+      length: _tabChoiceList.length,
+    );
+  }
+}

lib/pages/sports/run.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+class SportsRunPage extends StatefulWidget {
+  @override
+  createState() => _SportsRunPageState();
+}
+
+class _SportsRunPageState extends State with AutomaticKeepAliveClientMixin {
+
+  int count = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    print('--------异步实例化--------');
+  }
+
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Text('runnding $count'),
+      floatingActionButton: FloatingActionButton(
+        onPressed: () => setState(() { count = count + 1; }),
+        child: Icon(Icons.add),
+      ),
+    );
+  }
+}