欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《Flutter 控件大全》第七十三:RefreshIndicator 和 CupertinoSliverRefreshControl

程序员文章站 2022-03-11 11:00:37
...
  • 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
  • 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
  • Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

RefreshIndicator

RefreshIndicator是Material风格的下拉刷新组件。

基本用法如下:

var _list = [1, 2, 3, 4, 5];

RefreshIndicator(
      onRefresh: () async {
        setState(() {
          _list.add(_list.length + 1);
        });
      },
      child: ListView.builder(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('老孟${_list[index]}'),
          );
        },
        itemExtent: 50,
        itemCount: _list.length,
      ),
    )

RefreshIndicator和ListView组合 下拉刷新功能,效果如下:

《Flutter 控件大全》第七十三:RefreshIndicator 和 CupertinoSliverRefreshControl

设置指示器到顶部或者底部到距离:

RefreshIndicator(
  displacement: 10,
  ...
)

设置指示器的前置颜色和背景颜色:

RefreshIndicator(
  color: Colors.red,
  backgroundColor: Colors.lightBlue,
    ...
)

效果如下:

《Flutter 控件大全》第七十三:RefreshIndicator 和 CupertinoSliverRefreshControl

CupertinoSliverRefreshControl

CupertinoSliverRefreshControl 是ios风格的下拉刷新控件。

基本用法:

var _list = [1, 2, 3, 4, 5];
CustomScrollView(
  slivers: <Widget>[
    CupertinoSliverRefreshControl(
      onRefresh: () async {
        setState(() {
          _list.add(_list.length + 1);
        });
      },
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate((content, index) {
        return ListTile(
          title: Text('老孟${_list[index]}'),
        );
      }, childCount: _list.length),
    )
  ],
)

CupertinoSliverRefreshControl的用法和RefreshIndicator不同,CupertinoSliverRefreshControl需要放在CustomScrollView中。

效果如下:

《Flutter 控件大全》第七十三:RefreshIndicator 和 CupertinoSliverRefreshControl

相关标签: # Flutter Widgets