📖 前言

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

🎯 滚动交互组件概览

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

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

🔄 RefreshIndicator 组件

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

基础用法

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

image-20260201165404661

刷新列表数据

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]));
        },
      ),
    );
  }
}

image-20260201165425304

刷新网络数据

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]));
              },
            ),
    );
  }
}

image-20260201165515405

自定义样式

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

image-20260201165536039

在 SingleChildScrollView 中使用

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

image-20260201165608943

在 GridView 中使用

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'));
    },
  ),
)

image-20260201165631954

📊 Scrollbar 组件

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

基础用法

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

image-20260201165658034

自定义样式

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

image-20260201165731750

控制滚动条显示

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

image-20260201165807314

自定义滚动条颜色

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

image-20260201165826726

💡 实际应用场景

场景1：下拉刷新列表

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]),
          );
        },
      ),
    );
  }
}

image-20260201165849295

场景2：带滚动条的列表

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

image-20260201165913495

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

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}'),
        );
      },
    ),
  ),
)

image-20260201165937169

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

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

image-20260201165958954

⚠️ 常见问题与解决方案

问题1：RefreshIndicator 不显示

解决方案：

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

问题2：滚动条不显示

解决方案：

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

问题3：刷新时页面跳动

解决方案：

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

💼 最佳实践

1. 统一的刷新处理

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

2. 滚动条主题配置

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. 刷新组件封装

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

# flutter # harmonyos # 华为
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

Flutter艺术探索-Flutter在鸿蒙端运行原理：OpenHarmony平台集成

通过定制化的Embedder层，Flutter成功地在OpenHarmony上“安家落户”。这套方案本质上是在两个优秀的系统之间搭建了一座高效的数据桥梁，让Flutter的自绘引擎能驱动鸿蒙的屏幕，也让Dart代码能调用鸿蒙的分布式能力。回顾一下核心技术点桥梁是Embedder：它负责处理原生窗口、输入事件和平台通信，是适配工作的核心。渲染两条路：追求极致性能用直接渲染，保证广泛兼容用纹理混合。通

avatar 人工智能6S服务平台

【开源鸿蒙跨平台开发--KuiklyUI--01】 Windows平台Kuikly OpenHarmony开发环境搭建记录

该环境搭建安装重点是正确配置JDK 17环境、安装必要的插件以及正确配置Windows平台的OpenHarmony编译环境。希望本文能帮助Windows平台的新手开发者顺利进入Kuikly OpenHarmony开发领域。

avatar 人工智能6S服务平台
cover

【Harmonyos】Flutter开源鸿蒙跨平台训练营 Day 4 Flutter开源鸿蒙工具配置

avatar 人工智能6S服务平台