[Flutter] fish_redux连接器Connector和Adapter

Page连接Component

Page连接他的component，通过连接器connector

每一个component都需要一个connector来进行和page的连接，

Component和Component的连接同理，一模一样。

比如有一个Page : homepage，有一个List组件作为Componet: list，现在要要连接在一起。

STEP01

在Page页的state下创建list的连接器

///Page state
class ListConnector extends ConnOp {
  @override
  ListState? get(TabbarState state) {
    return state.listState;
  }

  @override
  void set(TabbarState state, ListState subState) {
    state.listState = subState;
  }
}

STEP02

在Page页面的page页面将connector和component连接在一起，注意实在slots插槽里

///Page page
dependencies: Dependencies(
    adapter: null,
    slots: >{
        'listComponent':ListConnector()+ListComponent(),
    }),

STEP03

连接完成，在Page的view页面通过viewService.buildComponent(name)引用component

viewService.buildComponent(name)返回的是一个widget

///Page view
container(
child:viewService.buildComponent('listComponent'),
)

ListView与item连接

和page连接component 或 component连接component 不同，它不再需要connector，ListView有专门的连接器adapter去连接它的item。

STEP01

建立adapter（姑且叫适配器，是为了list连接itemComponent

///list adapter
lass ListItemAdapter extends SourceFlowAdapter {
    static const String item_style = "project_tab_item";
    ListItemAdapter()
        : super(
            pool: >{
                ///指定itemComponent
                item_style: ItemComponent(),
            },
        );
}

STEP02

listComponent连接适配器ListItemAdapter

///list component
class ListComponent extends Component {
  ListComponent()
      : super(
            effect: buildEffect(),
            reducer: buildReducer(),
            view: buildView,
            dependencies: Dependencies(
                adapter: NoneConn() + ListItemAdapter(),
                slots: >{
                }),);

}

STEP03

在ListView页面的state将adapter和item绑定

/// list state
class ListState extends MutableSource implements Cloneable {
    List items = [];

    @override
    ListState clone() {
        return ListState()..items = items;
    }
    ///使用上面定义的List,继承MutableSource,就把列表和item绑定起来了
    @override
    Object getItemData(int index) => items[index];

    @override
    String getItemType(int index) => ListItemAdapter.item_style;

    @override
    int get itemCount => items.length;

    @override
    void setItemData(int index, Object data) {
        items[index] = data;
    }
}

ListState initState(Map? args) {
    return ListState();
}


STEP04


连接完成，在view页面就可以用ListView了


///list view
Widget _itemWidget(ListState state, ViewService viewService) {
  if (state.items != null) {
    return ListView.builder(
      itemBuilder: viewService.buildAdapter().itemBuilder,
      itemCount: viewService.buildAdapter().itemCount,
    );
  } else {
    return Center(
      child: CircularProgressIndicator(),
    );
  }
}




						  
					  
						
							


						

							
							
			Flutter学习							
						



						

						
						


						

						
					
					

					
					

						
相关

						

				
						
			            
            
            
                                    
           
  			
						

					

					
				

				

														
					
					

					
									

					
									   
标签

										

										
    
										

									

										
										

									

					

					
				


			
		
		
		
			


						





	

	
一品网 冀ICP备14022925号-6