組件構(gòu)成-component

Demo地址

看下他們之間的關(guān)系

TB1vqB2J4YaK1RjSZFnXXa80pXa-900-780.png

page-component.png

他們的構(gòu)成關(guān)系可以劃分為一下幾個部分

• state->connector->component
• page->dependencies->IdentifierKey->connector+component
• view->widget(viewService.buildComponent(IdentifierKey))

通過component構(gòu)建界面，分布式管理state，代碼解耦合，代碼可讀性極大程度提高

我們來看一個截圖

FBF9B1BB-F46F-41B9-95EE-EC50204FC812.png

使用fish_redux的component組件實現(xiàn)上圖效果

先創(chuàng)建界面，如下圖，全部是由FishReduxTemplate快捷創(chuàng)建fish_redux目錄統(tǒng)一創(chuàng)建

827378DE-155B-4363-BC8B-354352719B44.png

由于是靜態(tài)界面，只是做例子使用，只是在代碼中添加了page,view,state三個界面數(shù)據(jù)，我們看下代碼

• 主界面page頁面，對應(yīng)注釋已添加

class ComponentTestPage extends Page<ComponentTestState, Map<String, dynamic>> {
  ComponentTestPage()
      : super(
          initState: initState,
          effect: buildEffect(),
          reducer: buildReducer(),
          view: buildView,
          dependencies: Dependencies<ComponentTestState>(
              adapter: null,
              slots: <String, Dependent<ComponentTestState>>{
                //leftComponent/rightComponent為對應(yīng)組件的唯一標識符
                //Connector為連接器，可以理解為數(shù)據(jù)傳遞器
                //Component為對應(yīng)的組件
                'leftComponent':
                    CatalogueLeftConnector() + CatalogueLeftComponent(),
                'rightComponent':
                    CatalogueRightConnector() + CatalogueRightComponent(),
              }),
          middleware: <Middleware<ComponentTestState>>[],
        );
}

• 主界面state

class ComponentTestState implements Cloneable<ComponentTestState> {
  CatalogueLeftState leftState;
  CatalogueRightState rightState;

  @override
  ComponentTestState clone() {
    return ComponentTestState()
      ..leftState = leftState
      ..rightState = rightState;
  }
}

//初始化
ComponentTestState initState(Map<String, dynamic> args) {
  var state = ComponentTestState();
  final List<String> li =
      List<String>.generate(20, (i) => 'left_item_custom_model ${i + 1}');
  final List<String> ri =
      List<String>.generate(20, (i) => 'right_item_custom_model ${i + 100}');
  state.leftState = CatalogueLeftState(leftItems: li);
  state.rightState = CatalogueRightState(rightItems: ri);
  return state;
}

//左邊組件連接器
class CatalogueLeftConnector
    extends ConnOp<ComponentTestState, CatalogueLeftState> {
  @override
  CatalogueLeftState get(ComponentTestState state) {
    // TODO: implement get
    return state.leftState;
  }

  @override
  void set(ComponentTestState state, CatalogueLeftState subState) {
    // TODO: implement set
    state.leftState = subState;
  }
}

//右邊組件連接器
class CatalogueRightConnector
    extends ConnOp<ComponentTestState, CatalogueRightState> {
  @override
  CatalogueRightState get(ComponentTestState state) {
    // TODO: implement get
    return state.rightState;
  }

  @override
  void set(ComponentTestState state, CatalogueRightState subState) {
    // TODO: implement set
    state.rightState = subState;
  }
}

• 主界面view展示頁面

Widget buildView(
    ComponentTestState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Component'),
    ),
    body: _getBody(state, dispatch, viewService),
  );
}

Widget _getBody(
    ComponentTestState state, Dispatch dispatch, ViewService viewService) {
  return Row(
    children: <Widget>[
      _getLeft(viewService),
      _getRight(viewService),
    ],
  );
}

//左視圖
Expanded _getLeft(ViewService viewService) {
  return Expanded(
    flex: 1,
    child: Container(
      decoration: BoxDecoration(color: Colors.cyan),
      child: viewService.buildComponent('leftComponent'),
    ),
  );
}

//右視圖
Expanded _getRight(ViewService viewService) {
  return Expanded(
    flex: 3,
    child: Container(
      margin: const EdgeInsets.only(left: 10),
      decoration: BoxDecoration(color: Colors.black.withOpacity(0.1)),
      child: viewService.buildComponent('rightComponent'),
    ),
  );
}

主界面構(gòu)建完成，因為本文講解只是涉及component,因此，對應(yīng)的component中的widget構(gòu)建，使用的是基本的ListView，所以不再進行贅述，有興趣可以下載代碼看看，歡迎留言簡信我

Demo地址