Flutter 列表刷新快速集成方案 工具類

如果你項目中有大量的列表刷新功能鸿摇,上拉加載更多需求傲茄,你可以嘗試這個方案隔心,只需要實例化一個NFTrefreshListController子類,實現(xiàn)對應(yīng)接口竟痰,就可以快速接入列表刷新需求签钩。
整個列表的需求相當于是獨立的掏呼,整體相當于已隔離,顆粒度相當滿意边臼。

依賴 easy_refresh, 你也可以替換其他刷新包哄尔。

示例代碼

class HomeTabSocial extends StatefulWidget {
  const HomeTabSocial({Key? key}) : super(key: key);

  @override
  State<HomeTabSocial> createState() => _HomeTabSocialState();
}

class _HomeTabSocialState extends State<HomeTabSocial>
    {

final socialController = HomeTabSocialController()..onLoad();

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NFTrefreshList(
        controller: socialController,
        itemBuilder: (context, index) => SocialFeedListTile(
          item: socialController.data[index],
        ),
      ),
    );
  }


class HomeTabSocialController extends NFTrefreshListController<SocailFeedItem> {
  @override
  Future<List<SocailFeedItem>> fetchData(int page) async {
    var result = await MyRequest.post('api/v1/newList', data: {
      'member_id': '[memberId]', 
      'page': page,
      'page_size': pageSize,
    });
    var data = result.data['data'] as Map;
    var list = (data['list'] as List)
        .map((e) => SocailFeedItem.from(e, data))
        .toList();
    return list;
  }

  @override
  int get pageSize => 3;

  @override
  bool get hasFooter => true;

  @override
  bool get hasHeader => true;
}

源碼

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:get/get.dart';


class NFTrefreshList extends StatelessWidget {
  final NFTrefreshListController controller;
  final NullableIndexedWidgetBuilder itemBuilder;
  final IndexedWidgetBuilder? separatorBuilder;

  const NFTrefreshList({
    Key? key,
    required this.controller,
    required this.itemBuilder,
    this.separatorBuilder,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List>(
      stream: controller.stream,
      initialData: controller.data,
      builder: (context, snap) {
        if (snap.hasData) {
          return EasyRefresh(
            header: ClassicalHeader(),
            footer: ClassicalFooter(),
            controller: controller.easyRefresh,
            onLoad: controller.onLoad,
            onRefresh: controller.onRefresh,
            child: ListView.separated(
              itemCount: snap.data!.length,
              itemBuilder: itemBuilder,
              separatorBuilder:
                  separatorBuilder ?? (_, __) => const SizedBox.shrink(),
            ),
          );
        } else {
          return const CupertinoActivityIndicator();
        }
      },
    );
  }
}

abstract class NFTrefreshListController<T> {
  bool get hasHeader;
  bool get hasFooter;
  NFTrefreshListController();

  final EasyRefreshController easyRefresh = EasyRefreshController();
  final List<T> data = [];

  int get pageSize;
  int page = 1;

  final _controller = StreamController<List>.broadcast();
  Stream<List> get stream => _controller.stream;

  Future<void> onLoad() async {
    var list = await fetchData(page);
    if (list.isNotEmpty) {
      data.addAll(list);
      page += 1;
      _controller.add(data);
    } else {
      easyRefresh.finishLoad(success: true, noMore: true);
    }
    return;
  }

  Future<void> onRefresh() async {
    easyRefresh.resetLoadState();
    page = 1;
    var list = await fetchData(page);
    data.clear();
    data.addAll(list);
    page += 1;
    _controller.add(data);
    return;
  }

  Future<List<T>> fetchData(int page);
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市柠并,隨后出現(xiàn)的幾起案子岭接,更是在濱河造成了極大的恐慌,老刑警劉巖臼予,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸣戴,死亡現(xiàn)場離奇詭異,居然都是意外死亡粘拾,警方通過查閱死者的電腦和手機窄锅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缰雇,“玉大人入偷,你說我怎么就攤上這事⌒涤矗” “怎么了疏之?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長暇咆。 經(jīng)常有香客問我锋爪,道長,這世上最難降的妖魔是什么爸业? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任其骄,我火速辦了婚禮,結(jié)果婚禮上扯旷,老公的妹妹穿的比我還像新娘拯爽。我一直安慰自己,他們只是感情好钧忽,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布某抓。 她就那樣靜靜地躺著,像睡著了一般惰瓜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上汉矿,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天崎坊,我揣著相機與錄音,去河邊找鬼洲拇。 笑死奈揍,一個胖子當著我的面吹牛曲尸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播男翰,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼另患,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蛾绎?” 一聲冷哼從身側(cè)響起昆箕,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎租冠,沒想到半個月后鹏倘,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡顽爹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年纤泵,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片镜粤。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡捏题,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出肉渴,到底是詐尸還是另有隱情公荧,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布黄虱,位于F島的核電站稚矿,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏捻浦。R本人自食惡果不足惜晤揣,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望朱灿。 院中可真熱鬧昧识,春花似錦、人聲如沸盗扒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽侣灶。三九已至甸祭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間褥影,已是汗流浹背池户。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人校焦。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓赊抖,卻偏偏與公主長得像,于是被迫代替她去往敵國和親寨典。 傳聞我的和親對象是個殘疾皇子氛雪,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內(nèi)容