flutter实现列表加载,附带刷新加载

刷新用的第三方

flutter_easyrefresh: ^1.2.7

核心代码:

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          top: true,
          child: ProgressDialog(
            loading: isLoading,
            opacity: 0.1,
            layout: EasyRefresh(
              key: _easyRefreshKey,
              refreshHeader: ClassicsHeader(
                key: _headerKey,
                refreshHeight: 50,
                refreshText: "下拉刷新",
                refreshReadyText: "释放更新",
                refreshingText: "正在刷新...",
                refreshedText: "刷新完成",
                moreInfo: "上次更新 %T",
                bgColor: Colors.lightBlue,
                textColor: Colors.white,
                moreInfoColor: Colors.white,
                showMore: true,
              ),
              refreshFooter: ClassicsFooter(
                key: _footerKey,
                loadHeight: 50,
                loadText: "上拉加载",
                loadReadyText: "释放加载",
                loadingText: "正在加载...",
                loadedText: "加载完成",
                noMoreText: "没有更多",
                moreInfo: "上次加载 %T",
                bgColor: Colors.lightBlue,
                textColor: Colors.white,
                moreInfoColor: Colors.white,
              ),
              child: ListView.builder(
                itemCount: num,
                itemBuilder: (context, index) {
                  return layout();
                },
              ),
              onRefresh: () async {
                await Future.delayed(Duration(seconds: 3), () {
                  setState(() {
                    num = 10;
                  });
                });
              },
              loadMore: () async {
                await Future.delayed(Duration(seconds: 3), () {
                  setState(() {
                    if (num <= 20) {
                      num += 10;
                    }
                  });
                });
              },
            ),
          ),
        ),
      ),
    );
  }

  Widget layout() {
    return Column(
      children: <Widget>[
        GestureDetector(
          onTap: () {
            ToastUtil.showToast(context, "点击");
          },
          child: Container(
            padding: EdgeInsets.all(10),
            color: Colors.white,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                GestureDetector(
                  onTap: () {
                    ToastUtil.showToast(context, "图片");
                  },
                  child: Image.network(
                    "https://i2.hdslb.com/bfs/archive/b5afeb78b30a9d31175ca858c6c3cc2e2bd27cba.jpg@336w_190h.webp",
                    width: 100,
                    height: 70,
                    fit: BoxFit.fill,
                  ),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(
                          left: 8,
                          top: 3,
                        ),
                        child: Text(
                          "我是标题",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: 16,
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                          left: 8,
                          top: 8,
                        ),
                        child: Text(
                          "我是描述内容我是描述内容我是描述内容我是描述内容我是描述内容我是描述内容我是描述内容",
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            color: Colors.grey,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        //分割线
        Container(
          height: 1,
          color: Colors.grey,
        )
      ],
    );
  }

猜你喜欢

转载自blog.csdn.net/AndroidStudioo/article/details/88687857