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

相关推荐
youyin2 天前
HarmonyOS ArkUI 组件与自定义组件零基础：从搭页面到组件化开发
华为·harmonyos
HwJack202 天前
【HarmonyOS开发小实践】ArkTS 从 TypeScript 到方舟语言的演进
华为·harmonyos
张星河zen2 天前
4096卡、8EFLOPS、7.2T NPO：华为昇腾960超节点详解
华为·ai训练·ai推理·超节点·npo·昇腾960·hi-one
君赏2 天前
棉宇宙 Flutter 热更新是如何落地的
flutter
云运维笔记2 天前
华为设备IP地址配置全攻略
运维·网络·计算机网络·华为
威哥爱编程2 天前
HarmonyOS 7 星盾机密风控实战：设备风险因子端侧融合计算，可用不可见
harmonyos·arkts
恋猫de小郭2 天前
AndroidX 新增 Security State ，支持可编程的系统安全状态查询
android·前端·flutter
威哥爱编程2 天前
HarmonyOS 7 应用快启实战：关键资源预加载进内存，冷启告别白屏
华为·harmonyos·arkts
zihan5182 天前
自己做软件日记9/21 得到了一个良好的文件结构框架
后端·flutter·前端框架·android studio
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03Telegram APK 下载安装完整指南 — 2026年最新04历年考研数学一、数学二、数学三真题试卷及答案PDF05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08人工智能（AI）发展史：详细里程碑092026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享10ZCode 周末送额度活动开启：3 亿 Token 免费领取