《Flutter实战入门》下拉刷新组件的使用方法

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组合 下拉刷新功能，效果如下：

 

 

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

refreshindicator(
  displacement: 10,
  ...
)

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

refreshindicator(
  color: colors.red,
  backgroundcolor: colors.lightblue,
    ...
)

效果如下：

 

 

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中。

效果如下：