Flutter - MVP 디자인 모드 를 사용 하여 리 셋 목록 구성 요 소 를 패키지 합 니 다.

머리말
flutter 의 개발 에서 자주 ListView 의 상하 로 딩 업무 수 요 를 만 날 수 있 습 니 다. 저도 이 수요 에 대한 패 키 징, 주 소 를 시도 해 보 았 습 니 다.https://github.com/zhahao/auto_refresh_list_view. flutter 응답 식 이기 때문에 UI 의 디 스 플레이 를 바 꾸 려 면 일반적으로 구성원 변수의 값 을 수정 하고 setState 방법 을 호출 하여 state 재 호출 build 방법 을 사용 합 니 다. 구성원 변수의 값 에 따라 다른 widget 을 되 돌려 줍 니 다. AutoRefreshListView 내부 패키지 RefreshIndicator.child 는 ListView.builder() 를 주요 widget 으로 합 니 다. _state 를 통 해 제어 ListView서로 다른 상태의 보 기 를 표시 합 니 다.
디자인 모드
MVP 의 디자인 모델 을 사용 하여 AutoRefreshListView 기능 을 다음 과 같은 세 부분 으로 나 누고 각각 다른 Presenter 가 제공 합 니 다.

상태 보기 전시

데이터 제공

아 이 템 전시

기능 실현
AutoRefreshListView 내부 기능 구현
위로 당기다ListView 의 ScrollController 를 통 해 판단 한다.

_listScrollController.addListener(() {
      var maxScroll = _listScrollController.position.maxScrollExtent;
      var pixel = _listScrollController.position.pixels;
      if (maxScroll == pixel  && _loadingFlag == false) {
        ///       flag  true,          
        _loadingFlag = true;
        ///      ,        
     }
});

내리다RefreshIndicator.onRefresh 을 사용 하여 드 롭 다운 을 감청 합 니 다. ListView 를 손가락 아래로 끌 면 onRefresh 반전 이 발생 합 니 다. 이 럴 때 보통 네트워크 데 이 터 를 요청 합 니 다. 요청 이 돌아 오 면 호출 setState 이 필요 합 니 다. RefreshIndicator 는 다시 build 되 고 드 롭 다운 화살 표 는 사라 집 니 다. 위조 코드:

RefreshIndicator(
        child: ListView.builder(itemBuilder: null), 
        onRefresh: () async{
          /// 1.      
          var response = await fetchNetworkData();
          /// 2.1    ,                   
          /// 2.2    ,    
          if (response.success) {
            cleanData();
            restoreData();
            setState((){});
          }else {
            showErrorDialog();
          }
        });

AutoRefreshListView 는 Presenter 의 실현 에 맡긴다.
상태 보기
하나의 _state 를 사용 하여 전체 ListView 의 상 태 를 기록 하고 _state 변경 이 발생 하면 호출 setState 방법 을 사용 합 니 다. 전환 build 방법 으로 되 돌아 오 는 widget. 이 기능 은 RefreshListStateViewIPresenter 에서 제공 합 니 다.

enum _AutoRefreshListViewState {
  ///               
  loadingFirstPage,

  ///            
  errorOnLoadFirstPage,

  ///            
  emptyOnLoadFirstPage,

  ///       
  loadCompletedNoMoreData,

  ///      
  loadCompletedHasMoreData,

  ///        
  errorOnLoadMoreData,

  ///       
  loadingMoreData,
}

데이터 제공RefreshListViewDataIPresenter 에 의 해 제공 되 고 몇 가지 방법 을 추상 화 했 는데 주로

데이터 가 져 오기

모든 데 이 터 를 비우 고 수요 에 따라 다시 쓸 수 있 습 니 다

새 데이터 추가...

AutoRefreshListView 처리 RefreshListViewDataIPresenter 와 RefreshListStateViewIPresenter 간 의 논리 적 관 계 를 책임 진다.
아 이 템 전시
list 사용view_item_builder 3 자 실현, 이 라 이브 러 리 는 iOS 의 UITableview 와 기본적으로 일치 하 는 delegate 방법 과 dataSource 방법 을 제공 합 니 다. 매우 편리 하 게 구축 Listview 한 item. 또한 이 라 이브 러 리 를 presenter 처리 하여 RefreshListViewItemIPresenter 제공 item 합 니 다.
총결산
MVP 의 디자인 모델 은 flutter 에서 도 사용 할 수 있 고 코드 논리의 재 활용 성 을 향상 시 킬 수 있 을 것 같 습 니 다. 또한 dart 다 중 계승 을 지원 하면 모든 presenter 문법 을 한 가지 유형 에 융합 시 켜 실현 할 수 있 습 니 다. 이렇게 하면 간단 한 논리 사용 에 도 편리 합 니 다.