Flutter CupertinoSliverRefreshControl 苹果风格的刷新效果

题记

—— 优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维。


Flutter是谷歌推出的最新的移动开发框架。

RefreshIndicator 是 Material 风格的滑动刷新Widget

CupertinoSliverRefreshControl 是 苹果 风格的滑动刷新Widget ,效果是下拉刷新显示的加载圆圈。

盘点Flutter跨平台APP开发中使用到的进度条

CupertinoSliverRefreshControl 是Sliver家族中的一员,需要结合 NestScrollView 或者是CustomScrollView来使用。

在这里插入图片描述


本文章实现Demo运行效果 如下:
在这里插入图片描述

Demo配置如下

///下拉刷新组件
class HomePageRefreshIndicator extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<HomePageRefreshIndicator> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("下拉刷新"),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          //下拉刷新组件
          CupertinoSliverRefreshControl(
            //下拉刷新回调
            onRefresh: () async {
              //模拟网络请求
              await Future.delayed(Duration(milliseconds: 1000));
              //结束刷新
              return Future.value(true);
            },
          ),
          //列表
          SliverList(
            delegate: SliverChildBuilderDelegate((content, index) {
              return ListTile(
                title: Text('测试数据$index'),
              );
            }, childCount: 100),
          )
        ],
      ),
    );
  }
}


【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

【x4】一目了然的源码

【x5】简短的视频不一样的体验


不局限于思维,不局限语言限制,才是编程的最高境界。

以小编的性格,肯定是要录制一套视频的,随后会上传

有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人

本文章 的源码在这里
在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页