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

Flutter滚动交互组件使用指南摘要：本文介绍了Flutter中常用的滚动交互组件，包括RefreshIndicator实现下拉刷新功能，支持列表、网格等视图的数据刷新；以及Scrollbar组件用于显示滚动条，可自定义样式和显示方式。文章提供了详细的代码示例，涵盖基础用法、数据刷新、网络请求、自定义样式等多种场景，帮助开发者快速掌握Flutter滚动交互的实现方法。

小哥Mark

515人浏览 · 2026-02-01 17:01:49

小哥Mark · 2026-02-01 17:01:49 发布

📖 前言

滚动交互是移动应用中常见的交互方式，能够提供流畅的滚动体验和刷新功能。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')),
    ],
  ),
)

刷新列表数据

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

刷新网络数据

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

自定义样式

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

在 SingleChildScrollView 中使用

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

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

📊 Scrollbar 组件

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

基础用法

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

自定义样式

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

控制滚动条显示

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

自定义滚动条颜色

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

💡 实际应用场景

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

场景2：带滚动条的列表

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

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

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

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. 统一的刷新处理

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