[Flutter] fish_redux自定义tabController

本文主要是介绍[Flutter] fish_redux自定义tabController，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

fish_redux自定义tabController

STEP01 page

///混入SingleTickerProviderMixin
class TabbarPage extends Page<TabbarState, Map<String, dynamic>> with SingleTickerProviderMixin<TabbarState> {
 ...
 ...
 }

STEP02 effect

/// effect 在生命周期里初始化controller
Effect<TabbarState>? buildEffect() {
  return combineEffects(<Object, Effect<TabbarState>>{
    Lifecycle.initState:_iniController,
  });
}

///effect
void _iniController(Action action, Context<TabbarState> ctx) {
  ///--------------初始化Tabcontroller-----------
  final TickerProvider tickerProvider = ctx.stfState  as TickerProvider;
  var _controller =TabController(vsync: tickerProvider,length: ctx.state.tabList.length);
    ///监听controller
  _controller.addListener((){
    println(_controller.index);
  });
    ///闭包，发送意图，只不过闭包方法写很多个，相当于下面的方法
    ///ctx.dispatch(TabbarActionCreator.onChangeTabListAction({'controller':_controller}));
    ctx.dispatch(TabbarActionCreator.modify((clone) {
        clone.controller = _controller;
    }));
}

STEP03 action

///action 
typedef CloneFunc = Function(TabbarState clone);
enum TabbarAction {modify}

///action 通知reducer
static Action modify(CloneFunc func){
    return Action(TabbarAction.modify,payload: func);
  }

STEP04 reducer

///reducer
Reducer<TabbarState>? buildReducer() {
  return asReducer(
    <Object, Reducer<TabbarState>>{
      TabbarAction.modify: _modify,
    },
  );
}

///reducer
TabbarState _modify(TabbarState state, Action action) {
  final cloneFunc = action.payload as CloneFunc;
    ///调用state的clone函数，将当前state克隆一份给newState
  final TabbarState newState = state.clone();
  cloneFunc(newState);
    ///返回newState
  return newState;
}

STEP05 state

///state是事先定义好，等着reducer来调用这里的clone方法
class TabbarState implements Cloneable<TabbarState> {
    TabController? controller;
  @override
  TabbarState clone() {
    return TabbarState()
      ..controller = controller;
  }
}

STEP06 view

///view 调用state.controller
TabBar(
              indicatorColor: Colors.blue,
              labelColor: Colors.red,
              labelStyle: TextStyle(fontSize: 20),
              controller: state.controller,
              isScrollable: true,
              tabs: [Tab(child: Text('美食')),Tab(child: Text('食品')),Tab(child: Text('日用')),Tab(child: Text('花植')),Tab(child: Text('保健')),Tab(child: Text('生活'))]
            )

///view 调用state.controller
TabBarView(
      controller: state.controller,
      children: <Widget>[
        //美食
        viewService.buildComponent('listComponent'),
        //食品
        viewService.buildComponent('list2Component'),
        //日用
        viewService.buildComponent('list3Component'),
        //花植
        viewService.buildComponent('list4Component'),
        //保健
        viewService.buildComponent('list5Component'),
        //生活
        viewService.buildComponent('list6Component'),
      ],
    )

这篇关于[Flutter] fish_redux自定义tabController的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！