Flutter 專案實戰 下拉重繪、上拉加載 九

/ 不同串列樣式 /

????

/ 自定義下拉重繪、上拉加載樣式 /

作為一名Flutter開發者 , 在選擇依賴庫的時候 需要注意的幾個點 :

. 依賴庫的評分 pull_to_refresh

. 依賴庫最后更新的時間

. 依賴庫問題的反饋情況

. 依賴庫的來源

pull_to_refresh

自定義下拉重繪頭部樣式

ClassicHeader classicHeader() {
  return ClassicHeader(
    releaseText: '松開手重繪',
    refreshingText: '重繪中',
    completeText: '重繪完成',
    failedText: '重繪失敗',
    idleText: '下拉重繪',
    completeIcon: const Icon(Icons.done, color: Colors.red),
    idleIcon: const Icon(Icons.arrow_downward, color: Colors.red),
    releaseIcon: const Icon(Icons.refresh, color: Colors.red),
    failedIcon: const Icon(Icons.error, color: Colors.red),
    refreshingIcon: cirProInt(),
  );
}

旋轉影片

Container cirProInt() {
  return Container(
    child: CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation(Colors.red),
      strokeWidth: 4.0,
      backgroundColor: Colors.blue,
    ),
    width: 20.0,
    height: 20.0,
  );
}

自定義上拉加載更多底部樣式

. 簡單定義

ClassicFooter classicFooter() {
  return ClassicFooter(
    height: 100.0,
    loadingText: '加載中...',
    noDataText: '暫無資料',
    failedText: '加載失敗',
    idleText: '上拉加載',
  );
}

. 自定義上拉加載

根據不同的加載狀態顯示不同的提示 ; 設定底部自定義視圖點擊可以加載更多資料 .

CustomFooter? customerFooter(State state, RefreshController controller,
    {ILoadDataCallBack? callBack}) {
  return CustomFooter(
    height: 40.0,
    builder: (BuildContext context, LoadStatus? mode) {
      ///上拉加載提示
      String loadTips = '';

      ///是否加載中
      bool isLoading = false;

      ///是否可點擊加載更多
      bool isCanClick = false;
      if (mode == LoadStatus.idle) {
        loadTips = '上拉加載更多資料';
        isLoading = false;
        isCanClick = false;
      } else if (mode == LoadStatus.loading) {
        isLoading = true;
        isCanClick = false;
        loadTips = '資料加載中...';
      } else if (mode == LoadStatus.failed) {
        loadTips = '加載失敗,上拉加載更多資料';
        isCanClick = false;
        isLoading = false;
      } else if (mode == LoadStatus.canLoading) {
        loadTips = '點擊加載更多資料';
        isLoading = false;
        isCanClick = true;
      } else {
        isLoading = false;
        loadTips = '暫無資料,點擊可重新加載資料';
        isCanClick = true;
      }
      return GestureDetector(
          onTap: () {
            if (isCanClick) {
              controller.footerMode!.value = LoadStatus.canLoading;
              isLoading = true;
              print('上拉加載更多 $isCanClick');
            }
          },
          child: Container(
            height: 40.0,
            color: Colors.transparent,
            child: Center(
              child: isLoading
                  ? Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        cirProInt(),
                        Text(
                          '\t\t$loadTips',
                          style: TextStyle(
                              color: Color(0xFFBDBDBD), fontSize: 14.0),
                        ),
                      ],
                    )
                  : Text(
                      '$loadTips',
                      style:
                          TextStyle(color: Color(0xFFBDBDBD), fontSize: 14.0),
                    ),
            ),
          ));
    },
    loadStyle: LoadStyle.ShowAlways,
  );
}

///加載更多資料
typedef void ILoadDataCallBack();

. 使用自定義加載更多 customerFooter

/ 串列滾動是否可優化 /

通過開發者工具 AS 查看 Frame rendering times (大概意思就是每秒視圖渲染多少幀)

. 理想狀態下每秒渲染的幀數是接近1秒鐘60幀 ,下面的狀態是比1秒鐘60幀低了很多 . 串列滾動的程序中需要渲染的串列的每個視圖 視圖里面包含了一張圖片 . 可以嘗試不加載圖片 , 觀察一下每一秒繪制多少幀 .

. 取消圖片加載 ,觀察串列滾動時 每秒鐘渲染的幀數 , 有明顯的上升趨勢 . 所以為了進一步優化, 我們需要在滾動串列時 , 串列停止滾動加載視圖 .

. 監聽串列滾動狀態 ( NotificationListener )

bool notificationFunction(Notification notification) {
    ///通知型別
    switch (notification.runtimeType) {
      case ScrollStartNotification:
        print("開始滾動");

        ///重繪頁面 不加載圖片
        isLoadingPic = false;
        break;
      case ScrollUpdateNotification:
        print("正在滾動");
        break;
      case ScrollEndNotification:
        print("滾動停止");

        ///重繪頁面 加載圖片
        setState(() {
          isLoadingPic = true;
        });
        break;
      case OverscrollNotification:
        print("滾動到邊界");
        break;
    }
    return true;
  }

. 串列滾動過程中不渲染圖片到串列, 滾動完成渲染 并查看每秒繪制多少幀 到情況 .

免費介面 京東云

下拉重繪、上拉加載更多案例