说明

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

一般用于RefreshIndicator和ListView等组合下拉刷新功能。

常用属性：

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

• backgroundColor：背景色

• color：前景色

使用示例演示

import 'package:flutter/material.dart';

class RefreshIndicatorDemo extends StatefulWidget {
  @override
  StatecreateState() {
    return RefreshIndicatorDemoState();
  }
}

class RefreshIndicatorDemoState extends State<RefreshIndicatorDemo> {
  var _list = [1, 2, 3, 4, 5];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body: 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,
        ),
      )
    );
  }
}

效果：

CupertinoSliverRefreshControl的使用

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

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

示例：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class RefreshIndicatorDemo extends StatefulWidget {
  @override
  StatecreateState() {
    return RefreshIndicatorDemoState();
  }
}

class RefreshIndicatorDemoState extends State<RefreshIndicatorDemo> {
  var _list = [1, 2, 3, 4, 5];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body:
      CustomScrollView(

        slivers: [
          CupertinoSliverRefreshControl(
            onRefresh: () async {
              setState(() {
                _list.add(_list.length + 1);
              });
            },
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((content, index) {return ListTile(
                title: Text('码上加油站${_list[index]}'),
              );
            }, childCount: _list.length),
          )
        ],
      ),
    );
  }
}

完

  码上加油站

  一起来加油

长按扫码关注

记得点个赞和在看哦！