Flutter RefreshIndicator 下拉刷新

最新推荐文章于 2025-10-08 05:33:58 发布

原创最新推荐文章于 2025-10-08 05:33:58 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter RefreshIndicator 下拉刷新 #Flutter 下拉刷新

Flutter扩展专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍Flutter SDK中RefreshIndicator组件的使用方法及参数配置，包括如何实现下拉刷新功能，以及如何配合Scrollable组件使用。同时，提供了一个完整的代码示例。

RefreshIndicator FlutterSDK提供的下拉刷新组件，但是没有上拉加载，需要上拉加载可查看下拉刷新上拉加载Demo。

大家知道，所有的Scrollable都是可滚动的，但是如果没有足够内容，Scrollable是不可滚动的。Scrollable不可滚动时RefreshIndicator下拉功能不可用。这时官方告诉我们要将Scrollable的physics属性设置为AlwaysScrollableScrollPhysics。

参数详解

属性	说明
child	子组件
displacement	下拉距离，根据这个距离判定刷新执行。默认40.0
onRefresh	下拉监听
color	刷新进度指示器的前景色
backgroundColor	刷新进度指示器的背景色
notificationPredicate	是否应处理滚动通知的检查（是否通知下拉刷新动作）
semanticsLabel	标记此进度指示器(未知作用)
semanticsValue	此进度指示器的值(未知作用)

代码示例

class _MyHomeState extends State<MyHome> {
  //数据列表
  List list = new List();
  int x = 0;

  // 初始化数据
  @override
  void initState() {
    super.initState();
    getData('初始化数据');
  }

  /*
   * 获取数据
   */
  Future getData(String s) async {
    await Future.delayed(Duration(seconds: 2), () {
      setState(() {
        list = List.generate(20, (i) => '$s $i');
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('RefreshIndicator 下拉刷新'),),
      body: RefreshIndicator(
        child:ListView.builder(
          itemCount: list.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(this.list[index]),
            );
          },
        ),
        onRefresh:_onRefresh,
        // displacement:30,
        color:Colors.red,
        backgroundColor:Colors.green,
        // notificationPredicate:,
        semanticsLabel:'哈哈',
        semanticsValue:'sdfjnlsdjf',
      ),
    );
  }

  // 下拉监听 处理
  Future<Null> _onRefresh() async {
    x++;
    await Future.delayed(Duration(seconds: 3), () {
      print('refresh');
      setState(() {
        list = List.generate(20, (i) => '第 $x 次刷新后数据 $i');
      });
    });
  }

}