32 Flutter RefreshIndicator

最新推荐文章于 2025-09-05 21:00:00 发布

原创

最新推荐文章于 2025-09-05 21:00:00 发布 · 769 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文详细介绍了在Flutter中使用FlutterRefreshIndicator和CupertinoSliverRefreshControl实现下拉刷新功能，以及结合ScrollController实现上拉加载更多数据。通过设置组件属性和监听滚动事件，实现在列表顶部下拉时触发刷新，滚动到底部时加载更多数据。同时，文章还提及了如何添加类似androidSmartRefreshLayout的ClassHeader功能，提供了一个完整的示例代码。

Flutter RefreshIndicator和CupertinoSliverRefreshControl 下拉刷新组件

1.简介

官方下拉刷新组件，如果需要底部的加载，需要使用监听，

2.属性

const RefreshIndicator({
 
    Key key,
 
    @required this.child, //子集
 
    this.displacement = 40.0, //触发下拉刷新的距离
 
    @required this.onRefresh, //下拉回调方法,方法需要有async和await关键字，没有await，刷新图标立马消失，没有async，刷新图标不会消失
 
    this.color, //进度指示器前景色 默认为系统主题色
 
    this.backgroundColor, //背景色
 
    this.notificationPredicate = defaultScrollNotificationPredicate,
 
    this.semanticsLabel,
    this.semanticsValue,
})

3.基本用法

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: CustomScrollViewDemo(),
      home: Scaffold(
        body: HomePageRefreshIndicator(),
      ),
    );
  }
}

///下拉刷新组件
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: RefreshIndicator(
        //圆圈进度颜色
        color: Colors.blue,
        //下拉停止的距离
        displacement: 44.0,

最低0.47元/天解锁文章