Flutter下拉刷新和滚动条组件在鸿蒙应用程序实战示例

小哥Mark2026-02-02 8:14

📖 前言

滚动交互是移动应用中常见的交互方式，能够提供流畅的滚动体验和刷新功能。Flutter 提供了丰富的滚动交互组件，包括 RefreshIndicator、Scrollbar 等，能够实现下拉刷新、滚动条显示等功能。本教程将带你深入了解 Flutter 中滚动交互组件的各种用法和最佳实践。

🎯 滚动交互组件概览

Flutter 提供了以下滚动交互组件：

组件名 功能说明 适用场景
RefreshIndicator 下拉刷新 列表、网格、滚动视图刷新
Scrollbar 滚动条 显示滚动位置和进度

🔄 RefreshIndicator 组件

RefreshIndicator 是 Material Design 风格的下拉刷新组件，提供标准的刷新功能和样式。

基础用法

dart 复制代码 
RefreshIndicator(
  onRefresh: () async {
    // 刷新操作
    await Future.delayed(Duration(seconds: 2));
  },
  child: ListView(
    children: [
      ListTile(title: Text('项目1')),
      ListTile(title: Text('项目2')),
    ],
  ),
)

刷新列表数据

dart 复制代码 
class RefreshableList extends StatefulWidget {
  @override
  _RefreshableListState createState() => _RefreshableListState();
}

class _RefreshableListState extends State<RefreshableList> {
  List<String> _items = ['项目1', '项目2', '项目3'];

  Future<void> _refresh() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _items = ['新项目1', '新项目2', '新项目3'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _refresh,
      child: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(_items[index]));
        },
      ),
    );
  }
}

刷新网络数据

dart 复制代码 
class NetworkRefreshList extends StatefulWidget {
  @override
  _NetworkRefreshListState createState() => _NetworkRefreshListState();
}

class _NetworkRefreshListState extends State<NetworkRefreshList> {
  List<String> _data = [];

  Future<void> _refresh() async {
    // 从网络获取数据
    final newData = await fetchDataFromNetwork();
    setState(() {
      _data = newData;
    });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _refresh,
      child: _data.isEmpty
          ? Center(child: Text('下拉刷新'))
          : ListView.builder(
              itemCount: _data.length,
              itemBuilder: (context, index) {
                return ListTile(title: Text(_data[index]));
              },
            ),
    );
  }
}

自定义样式

dart 复制代码 
RefreshIndicator(
  color: Colors.blue,
  backgroundColor: Colors.white,
  onRefresh: () async {
    await Future.delayed(Duration(seconds: 2));
  },
  child: ListView(...),
)

在 SingleChildScrollView 中使用

dart 复制代码 
RefreshIndicator(
  onRefresh: () async {
    await Future.delayed(Duration(seconds: 2));
  },
  child: SingleChildScrollView(
    child: Column(
      children: [
        Text('内容1'),
        Text('内容2'),
        Text('内容3'),
      ],
    ),
  ),
)

在 GridView 中使用

dart 复制代码 
RefreshIndicator(
  onRefresh: () async {
    await Future.delayed(Duration(seconds: 2));
  },
  child: GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
    ),
    itemCount: 10,
    itemBuilder: (context, index) {
      return Card(child: Text('项目 $index'));
    },
  ),
)

📊 Scrollbar 组件

Scrollbar 用于显示滚动条，帮助用户了解滚动位置和内容长度。

基础用法

dart 复制代码 
Scrollbar(
  child: ListView(
    children: [
      ListTile(title: Text('项目1')),
      ListTile(title: Text('项目2')),
      // ... 更多项目
    ],
  ),
)

自定义样式

dart 复制代码 
Scrollbar(
  thickness: 8,
  radius: Radius.circular(4),
  child: ListView(
    children: [
      ListTile(title: Text('项目1')),
      ListTile(title: Text('项目2')),
    ],
  ),
)

控制滚动条显示

dart 复制代码 
Scrollbar(
  isAlwaysShown: true,  // 始终显示滚动条
  child: ListView(
    children: [
      ListTile(title: Text('项目1')),
      ListTile(title: Text('项目2')),
    ],
  ),
)

自定义滚动条颜色

dart 复制代码 
ScrollbarTheme(
  data: ScrollbarThemeData(
    thickness: MaterialStateProperty.all(8),
    radius: Radius.circular(4),
    thumbColor: MaterialStateProperty.all(Colors.blue),
  ),
  child: Scrollbar(
    child: ListView(...),
  ),
)

💡 实际应用场景

场景1：下拉刷新列表

dart 复制代码 
class RefreshableListView extends StatefulWidget {
  @override
  _RefreshableListViewState createState() => _RefreshableListViewState();
}

class _RefreshableListViewState extends State<RefreshableListView> {
  List<String> _items = [];
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  Future<void> _loadData() async {
    setState(() {
      _isLoading = true;
    });
    
    await Future.delayed(Duration(seconds: 1));
    
    setState(() {
      _items = List.generate(20, (index) => '项目 ${index + 1}');
      _isLoading = false;
    });
  }

  Future<void> _refresh() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _items = List.generate(20, (index) => '新项目 ${index + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return Center(child: CircularProgressIndicator());
    }
    
    return RefreshIndicator(
      onRefresh: _refresh,
      child: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_items[index]),
          );
        },
      ),
    );
  }
}

场景2：带滚动条的列表

dart 复制代码 
Scrollbar(
  isAlwaysShown: true,
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('项目 ${index + 1}'),
      );
    },
  ),
)

场景3：刷新和滚动条组合

dart 复制代码 
RefreshIndicator(
  onRefresh: () async {
    await Future.delayed(Duration(seconds: 2));
  },
  child: Scrollbar(
    child: ListView.builder(
      itemCount: 50,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('项目 ${index + 1}'),
        );
      },
    ),
  ),
)

场景4：自定义刷新指示器

dart 复制代码 
RefreshIndicator(
  color: Colors.blue,
  backgroundColor: Colors.white,
  strokeWidth: 3,
  onRefresh: () async {
    await Future.delayed(Duration(seconds: 2));
  },
  child: ListView(...),
)

⚠️ 常见问题与解决方案

问题1：RefreshIndicator 不显示

解决方案：

  • 确保子组件是可滚动的（ListView、GridView、SingleChildScrollView）
  • 确保内容足够长，可以滚动
  • 检查 onRefresh 是否返回 Future

问题2：滚动条不显示

解决方案：

  • 设置 isAlwaysShown: true 始终显示
  • 确保内容足够长，可以滚动
  • 检查 ScrollbarTheme 设置

问题3：刷新时页面跳动

解决方案：

  • 使用 setState 更新数据
  • 避免在刷新时重建整个列表
  • 使用 ListView.builder 而不是 ListView

💼 最佳实践

1. 统一的刷新处理

dart 复制代码 
class RefreshHandler {
  static Future<void> refreshData(Function updateCallback) async {
    try {
      // 显示加载指示器
      await Future.delayed(Duration(seconds: 1));
      
      // 更新数据
      await updateCallback();
    } catch (e) {
      // 处理错误
      print('刷新失败: $e');
    }
  }
}

2. 滚动条主题配置

dart 复制代码 
class AppScrollbarTheme {
  static ScrollbarThemeData get theme => ScrollbarThemeData(
    thickness: MaterialStateProperty.all(8),
    radius: Radius.circular(4),
    thumbColor: MaterialStateProperty.all(Colors.blue.withOpacity(0.5)),
    minThumbLength: 48,
  );
}

3. 刷新组件封装

dart 复制代码 
class AppRefreshIndicator extends StatelessWidget {
  final Future<void> Function() onRefresh;
  final Widget child;
  
  const AppRefreshIndicator({
    required this.onRefresh,
    required this.child,
  });
  
  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: onRefresh,
      color: Colors.blue,
      backgroundColor: Colors.white,
      child: child,
    );
  }
}

📚 总结

通过本教程，我们学习了：

  1. ✅ RefreshIndicator 组件的下拉刷新功能
  2. ✅ Scrollbar 组件的滚动条显示
  3. ✅ 实际应用场景和最佳实践

滚动交互组件是 Flutter 应用中实现流畅滚动体验的重要组件，掌握好这些组件的用法，能够让你的应用交互更加完善和用户友好！

🔗 相关资源

Happy Coding! 🎨✨
欢迎加入开源鸿蒙跨平台社区

相关推荐
小 黄 鸡4 小时前
Flutter 面试必会知识点详解（从基础到进阶）
flutter·面试·职场和发展
程序猿追4 小时前
kotlin-retry 接入鸿蒙后，怎样确认它真的会停止重试
开发语言·kotlin·harmonyos
懿路向前7 小时前
HarmonyOS 粒子特效实战：emitter.size 是双刃剑：粒子精确定位 [0,0] 与条带随机出生（HarmonyOS）
华为·harmonyos
马剑威（威哥爱编程）8 小时前
【共创稿事节】HarmonyOS 7 Agent 开发实战 04：云端 RAG 搭企业私有知识库问答
人工智能·华为·harmonyos
贾伟康8 小时前
【晨迹相机｜20】HarmonyOS ArkTS AppGallery 发布复查实战：核对包名、版本、设备、素材和离线声明
harmonyos·arkts·appgallery·发布审核·上架复查
特立独行的猫a9 小时前
用仓颉写桌面应用：从 npx 建工程到串口实时示波器
开源·harmonyos·tauri·仓颉·cj-tarui
m0_6855350811 小时前
光学设计自学
华为·光学·光学设计·光学工程·镜头设计
大龄秃头程序员11 小时前
Flutter 最少代码验证：为什么子 Isolate 调原生，一定要先回到主 Isolate？
flutter
懿路向前11 小时前
HarmonyOS 粒子特效实战：马赛克切块提速 17.6×~38×：desiredRegion 重复读盘与一次解码管线（HarmonyOS）
华为·harmonyos
垆边人似月.11 小时前
华为题：LRU 缓存
缓存·华为
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）07如何新建文件夹？ 电脑新建文件夹的4种方法08Telegram APK 下载安装完整指南 — 2026年最新09轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新