Tab状态管理

Author: 罗国雄

README.md

@@ -19,3 +19,38 @@
 | ![](./imges/mine.png) | ![](./imges/login.png) | ![](./imges/catalog.png) | ![](./imges/brand.png) |
 | | | | |
 
+## 已实现
+
+* Provider+shared_preferences实现数据状态管理、缓存。
+* Rem适配方案。
+* Dio的二次封装，API模块化。
+* 封装侧边栏Tab切换组件。
+* 封装Appbar与Tab的AppTab切换。
+* 下拉刷新与上拉加载更多。
+* 路由模块管理。
+
+## 还需要做的事
+
+1. 此项目还在开发中，后续会把业务补充完整。（商品、专题、制造商、购物车、用户信息管理）页面的完善。
+2. 项目优化，从UI到性能分析，我也是Flutter的初学者，后续如果有学到好的方案，需迭代。
+3. 尝试将部分模块以WebView+H5进行混合开发。
+4. 后续会补充我在开发中遇到的问题，进行补充、和记录。
+
+## 需注意的东西
+
+* 目前只提供了android的下载体验，IOS请自行下载代码体验。
+* 在开发环境的debug可能会稍微卡顿，属正常现象，良好的体验请进行打release包。
+
+## 最后
+
+* 如果EasyMarketFlutter对你有帮助，留下你的Star或者fork，你的支持是我不断更新的动力！！
+* 欢迎你们的Issues,希望Flutter越来越好，大家一起学习!Love Coding!
+* Thanks!
+
+## 关于我
+
+Name: pero 罗
+
+QQ: 1025558554
+
+Email：[1025558554@qq.com](mailto:1025558554@qq.com)

lib/page/app.dart

@@ -4,6 +4,7 @@ import 'package:easy_market/page/topic/index.dart';
 import 'package:easy_market/page/sort/index.dart';
 import 'package:easy_market/page/mine/index.dart';
 import 'package:easy_market/page/cart/index.dart';
+import 'package:easy_market/page/wrapper.dart';
 
 class App extends StatefulWidget {
  @override
@@ -22,11 +23,11 @@ class _ApplicationPageState extends State<App> {
  int _currentPageIndex = 0;
 
  final pageList = [
- Home(),
- Topic(),
- Sort(),
- Cart(),
- Mine(),
+ WrapKeepState(Home()),
+ WrapKeepState(Topic()),
+ WrapKeepState(Sort()),
+ WrapKeepState(Cart()),
+ WrapKeepState(Mine()),
  ];
 
  Widget getPage(_index) {
@@ -67,6 +68,18 @@ class _ApplicationPageState extends State<App> {
  }
  }
 
+ final pageController = PageController();
+
+ void onTap(int index) {
+ pageController.jumpToPage(index);
+ }
+
+ void onPageChanged(int index) {
+ setState(() {
+ _currentPageIndex = index;
+ });
+ }
+
  @override
  Widget build(BuildContext context) {
  return new Scaffold(
@@ -80,12 +93,19 @@ class _ApplicationPageState extends State<App> {
  ),
  preferredSize: new Size(MediaQuery.of(context).size.width, 0),
  ),
- body: pageList[_currentPageIndex],
+ // PageView+wrapper封装保存页面状态
+ body: PageView(
+ children: pageList,
+ controller: pageController,
+ onPageChanged: onPageChanged,
+ physics: NeverScrollableScrollPhysics(), // 禁止滑动
+ ),
  bottomNavigationBar: BottomNavigationBar(
  items: itemList,
  onTap: (int index) {
  setState(() {
  _currentPageIndex = index;
+ pageController.jumpToPage(index);
  });
  },
  iconSize: 24,

lib/page/wrapper.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+class WrapKeepState extends StatefulWidget {
+ WrapKeepState(this.hocWidget);
+ final Widget hocWidget;
+ @override
+ State<StatefulWidget> createState() {
+ return _WrapKeepState();
+ }
+}
+
+class _WrapKeepState extends State<WrapKeepState>
+ with AutomaticKeepAliveClientMixin {
+ @override
+ bool get wantKeepAlive => true;
+ @override
+ Widget build(BuildContext context) {
+ super.build(context);
+ return widget.hocWidget;
+ }
+}