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! 🎨✨
欢迎加入开源鸿蒙跨平台社区

相关推荐
晚霞的不甘2 小时前
Flutter for OpenHarmony 实现 iOS 风格科学计算器：从 UI 到表达式求值的完整解析
前端·flutter·ui·ios·前端框架·交互
前端世界2 小时前
从原理到落地：鸿蒙系统跨网络设备互联完整解析
华为·harmonyos
2501_921930832 小时前
React Native 鸿蒙跨平台开发：LinearGradient 线性渐变详解
react native·react.js·harmonyos
听麟2 小时前
HarmonyOS 6.0+ PC端智能监控助手开发实战：摄像头联动与异常行为识别落地
人工智能·深度学习·华为·harmonyos
雨季6662 小时前
Flutter 三端应用实战：OpenHarmony “呼吸灯”——在焦虑时代守护每一次呼吸的数字禅修
开发语言·前端·flutter·ui·交互
2601_949543012 小时前
Flutter for OpenHarmony垃圾分类指南App实战：资讯详情实现
android·java·flutter
2501_920931709 小时前
React Native鸿蒙跨平台采用ScrollView的horizontal属性实现横向滚动实现特色游戏轮播和分类导航
javascript·react native·react.js·游戏·ecmascript·harmonyos
摘星编程10 小时前
React Native鸿蒙版：Drawer抽屉导航实现
react native·react.js·harmonyos
向哆哆10 小时前
打造高校四六级报名管理系统：基于 Flutter × OpenHarmony 的跨端开发实践
flutter·开源·鸿蒙·openharmony·开源鸿蒙
热门推荐
01GitHub 镜像站点02Clawdbot 中文汉化版 接入微信、飞书03OpenClaw部署与配置教程：在Mac mini上接入国产大模型与飞书042026美赛A题智能手机电池续航时间预测的连续时间数学模型05OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)06Linux下V2Ray安装配置指南07UV安装并设置国内源08Claude Code Skills 实用使用手册09Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services102025 年大语言模型发展回顾：关键突破、意外转折与 2026 年展望