flutter使用fishredux管理数据后自定义TabController
flutter小白踩坑记。
学习flutter，之前一直写的vue，也写过react，习惯于数据状态管理的flutter小白总想也找个flutter数据管理的插件做个数据统一管理，于是网上到处搜索了解，好乱啊，像vue就一个vuex直接用，方便非常（虽然也可以用redux）。找来找去，最后选了咸鱼团队的fishredux，一番折腾后，终于弄上去了，开森。可是接下来的问题一大堆，使用了fishredux管理数据后，很多写法都变了，心里再次迎来一万头马，mmp,坑来了！！！！最糟糕的是fishredux没有任何官方文档（反正我没找到）！！！
使用TabBarView后，TabController要怎么搞？
很明显以前的写法没法用了！
使用fishredux之前是这么写的
TabController mController;
Widget build(BuildContext context) {
@override
void initState() {
super.initState();
mController = TabController(
length: tabTitles.length,
vsync: this,
);
}
Widget _tabBarView() {
return TabBarView(
controller: mController,
children: tabTitles.map((item) {
return Container();
}).toList(),
);
}
}
用上了fishredux以后，这样写法直接报错啊，头大，一番折腾之后，终于找到了解决办法！
下面是我的部分目录结构，也是需要修改的部分
1.首先新建component.dart页面
component.dart页面代码如下
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart' hide Action;//注意这里
import 'state.dart';
class PersonListComponent extends ComponentState<PersonListState> with SingleTickerProviderStateMixin{
@override
PersonListComponent createState() => PersonListComponent();
}
注意这一行：import ‘package:flutter/material.dart’ hide Action;
后面的 hide Action，就是隐藏Action组件的意思，因为fishredux的Action和flutter本身的Action组件冲突了，这里将flutter本身的Action组件隐藏不引用。
然后再view.dart中声明tabbar切换的数据，即tab导航按钮数据
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'tabBarComponents/AllPerson.dart';
import 'tabBarComponents/ToLoanPerson.dart';
import 'tabBarComponents/TransactionPerson.dart';
import 'tabBarComponents/WorkPerson.dart';
import 'tabBarComponents/ExitPerson.dart';
import 'action.dart';
import 'state.dart';
import 'package:labour_app/globalComponents/TopTabBar.dart';//我的TopTabBar是存放在globalComponents文件夹中
//tabList是tabbar切换的数据
List tabList = [
{
"title":'全部人员',
"widget":AllPerson(),
"index":0,
},
{
"title":'在场人员',
"widget":WorkPerson(),
"index":1,
},
{
"title":'退场人员',
"widget":ExitPerson(),
"index":2,
},
{
"title":'异动人员',
"widget":TransactionPerson(),
"index":3,
},
];
var personType=0;//人员类型
_renderPersonList(int index,List persons){
Widget buildView(PersonListState state, Dispatch dispatch, ViewService viewService) {
return MaterialApp(
theme: ThemeData(
brightness: Brightness.light,
primaryColor: Colors.white,
textTheme: TextTheme(
title: TextStyle(fontSize: 18.0,),
),
),
home: Scaffold(
backgroundColor: Color(0xFFf5f5f5),
appBar: AppBar(
title: Text('劳务人员'),
leading: GestureDetector(
onTap:(){
//顺便提一下，在view.dart里面可以在viewService中找到context，等下告诉你我是怎么找到的
Navigator.of(viewService.context).pop();
},
child: Icon(Icons.arrow_back_ios,color: Colors.grey,),
),
centerTitle: true,
),
body: Column(
children: <Widget>[
Container(
color: Color(0xffffffff),
height: 50.0,
//这里将tabBar组件提出去封装了
child: TopTabBar(tabList:tabList,controller:state.controller),
),
//TabBarView外层加上Expanded，不然会报错，具体报啥忘了，感兴趣的自己去试
Expanded(
child: TabBarView(
controller: state.controller,//这里从state中取出controller赋值给TabBarView的controller即可
children: tabList.map((item) {
return Container(
child:Text('页面')
);
}).toList(),
),
)
],
),
),
);
}
TopTabBar组件，我的TopTabBar是存放在globalComponents文件夹中
import 'package:flutter/material.dart';
class TopTabBar extends StatefulWidget {
@override
final List tabList;
final TabController controller;
TopTabBar({
Key key,
@required this.tabList,
@required this.controller
}):super(key:key);
@override
TopTabBarState createState() => TopTabBarState();
}
class TopTabBarState extends State<TopTabBar>{
@override
Widget build(BuildContext context) {
return TabBar(
isScrollable: true,
//是否可以滚动
controller: widget.controller,
labelColor: Color(0xff248bfe),
unselectedLabelColor: Color(0xff666666),
labelStyle: TextStyle(fontSize: 16.0),
tabs: widget.tabList.map((item) {
return Tab(
text: item["title"],
);
}).toList(),
onTap:(index){
print(index);
},
);
}
}
state.dart中
import 'dart:ui';
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
class PersonListState implements Cloneable<PersonListState>, GlobalBaseState{
PersonListState clone() {
return PersonListState();
}
@override
TabController controller;
@override
Color themeColor;
}
PersonListState initState(Map<String, dynamic> args) {
return PersonListState();
}
reducer.dart中
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart' hide Action;
import 'package:labour_app/views/PersonList/view.dart';
import 'action.dart';
import 'state.dart';
Reducer<PersonListState> buildReducer() {
return asReducer(
<Object, Reducer<PersonListState>>{
PersonListAction.changeTabListAction: _onInItController,
},
);
}
//初始化controller控制
PersonListState _onInItController(PersonListState state, Action action) {
TabController controller =action.payload["controller"] ?? null;
final PersonListState newState = state.clone();
newState.controller=controller;
return newState;
}
page.dart中
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart' hide Action;//这里注意，要隐藏Action类
import 'effect.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';
import 'component.dart';
class PersonListPage extends Page<PersonListState, Map<String, dynamic>> {
PersonListPage()
: super(
initState: initState,
effect: buildEffect(),
reducer: buildReducer(),
view: buildView,
dependencies: Dependencies<PersonListState>(
adapter: null,
slots: <String, Dependent<PersonListState>>{
}),
middleware: <Middleware<PersonListState>>[
],);
//这下面几行是创建component.dart后必须加的
@override
ComponentState<PersonListState> createState() {
return PersonListComponent();
}
}
effect.dart中
偷偷告诉你一个惊天秘密，在view.dart中声明的变量在effect.dart中可以看到哦！！我的天哪，还有这操作！！所以我在view.dart中声明的tabList数据变量可以在effect.dart中直接拿来使用！
扫描二维码关注公众号，回复：
12459880 查看本文章
再告诉你一个惊天发现，我是从这里判断到view.dart可以从viewService中取到context的，我们来分分析一下：
void _initController(Action action,Context ctx){
ctx.dispatch(PersonListActionCreator.onChangeTabListAction({tabList:tabList,‘controller’:_controller}));
}
从这里可以看到，effect中有ctx，而其他几个文件是没有的
然后再看看view.dart中
Widget buildView(PersonListState state, Dispatch dispatch, ViewService viewService) {}）
按我web端的思想，要想取到context，最先想到的是this中，可是再这里直接写this报错，那么就只能从参数中尝试
Widget buildView总共三个参数。第一个state，不用猜就是state.dart里面的东西；第二个dispatch，用过 vuex 或者 redux 想必都很清楚，这是 action 的东西，何况这插件叫f ishredux ，那么就只剩下第三个viewService，看字面意思，不久视图服务嘛？而 context也是界面，果断试了下 viewService.context ，成功！！
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart' hide Action; //注意要隐藏Actio类
import 'package:flutter/widgets.dart' hide Action; //注意要隐藏Actio类
import 'package:labour_app/views/PersonList/view.dart';
import 'action.dart';
import 'state.dart';
Effect<PersonListState> buildEffect() {
return combineEffects(<Object, Effect<PersonListState>>{
Lifecycle.initController: _initController, //页面初始化监听tabbar控制
});
}
void _initController(Action action,Context<PersonListState> ctx){
final TickerProvider tickerProvider = ctx.stfState as TickerProvider;
var _controller =TabController(vsync: tickerProvider,length: tabList.length);
_controller.addListener((){
println(_controller.index);
});
ctx.dispatch(PersonListActionCreator.onChangeTabListAction({
tabList:tabList,'controller':_controller}));
}
action.dart中
import 'package:fish_redux/fish_redux.dart';
//TODO replace with your own action
enum PersonListAction {
changeTabListAction
}
//tabbar contruller
static Action onChangeTabListAction(params) {
/*
params是effect.dart中ctx.dispatch(PersonListActionCreator.onChangeTabListAction({tabList:tabList,'controller':_controller})); 传递来的参数，
即params就是{tabList:tabList,'controller':_controller}
action里通过payload接收
*/
return Action(PersonListAction.changeTabListAction,payload:params);
}]
}
好了，运行下试试，搞定！！！