Flutter 滚动监听及控制

封面图 • 2025-11-01 • Flutter

在 Flutter 中，滚动监听和控制是非常常见的需求。比如你可能需要在用户滚动到某个位置时执行某些操作（如加载更多数据），或者动态控制一个 `ListView`、`ScrollView` 的滚动位置。

以下是一些常用的滚动监听与控制方法：

---

## 一、滚动监听

### 1. 使用 `ScrollController`

`ScrollController` 是 Flutter 中用于控制和监听滚动的核心类。

#### 示例代码：

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('滚动监听示例')),
        body: ScrollListener(),
      ),
    );
  }
}

class ScrollListener extends StatefulWidget {
  @override
  _ScrollListenerState createState() => _ScrollListenerState();
}

class _ScrollListenerState extends State<ScrollListener> {
  final ScrollController _scrollController = ScrollController();

@override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

void _onScroll() {
    print("当前滚动位置: ${_scrollController.offset}");
    if (_scrollController.offset >= _scrollController.position.maxScrollExtent - 200) {
      print("接近底部，可以加载更多");
    }
  }

@override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemCount: 50,
      itemBuilder: (context, index) {
        return ListTile(title: Text("Item $index"));
      },
    );
  }

@override
  void dispose() {
    _scrollController.removeListener(_onScroll);
    _scrollController.dispose();
    super.dispose();
  }
}
```

### 2. 监听滚动方向

你可以通过比较当前滚动位置与前一次的位置来判断是向上还是向下滚动：

```dart
double previousOffset = 0;

void _onScroll() {
  double currentOffset = _scrollController.offset;
  if (currentOffset > previousOffset) {
    print("向下滚动");
  } else if (currentOffset < previousOffset) {
    print("向上滚动");
  }
  previousOffset = currentOffset;
}
```

---

## 二、滚动控制

### 1. 滚动到指定位置

使用 `ScrollController.jumpTo()` 或 `ScrollController.animateTo()` 方法。

```dart
_scrollController.jumpTo(300); // 立即跳转到 y=300 的位置
_scrollController.animateTo(300,
    duration: Duration(seconds: 1),
    curve: Curves.easeIn
);
```

### 2. 滚动到顶部/底部

```dart
_scrollController.jumpTo(0); // 到顶部
_scrollController.jumpTo(_scrollController.position.maxScrollExtent); // 到底部
```

---

## 三、监听滚动事件的其他方式

### 1. 使用 `NotificationListener`

如果你希望监听更细粒度的滚动事件（如 `ScrollUpdateNotification`、`ScrollEndNotification` 等），可以使用 `NotificationListener<ScrollNotification>`。

```dart
NotificationListener<ScrollNotification>(
  onNotification: (notification) {
    if (notification is ScrollUpdateNotification) {
      print("正在滚动中...");
    } else if (notification is ScrollEndNotification) {
      print("滚动结束");
    }
    return true;
  },
  child: ListView.builder(...),
)
```

---

## 四、常用滚动组件

| 组件 | 功能 |
|------|------|
| `ListView` | 垂直滚动列表 |
| `ListView.builder` | 构建大量数据项的列表 |
| `SingleChildScrollView` | 单个可滚动区域 |
| `CustomScrollView` | 自定义滚动行为 |
| `GridView` | 网格布局滚动 |

---

## 五、常见问题

### Q：如何防止多次触发“加载更多”？

A：可以在 `_onScroll` 中加一个标志位，避免重复请求。

```dart
bool _isLoading = false;

void _onScroll() {
  if (!_isLoading && _scrollController.offset >= ... ) {
    _isLoading = true;
    fetchData().then((_) {
      setState(() {
        _isLoading = false;
      });
    });
  }
}
```

---

## 六、总结

| 功能 | 方法 |
|------|------|
| 监听滚动 | `ScrollController.addListener()` |
| 控制滚动 | `ScrollController.jumpTo()` / `animateTo()` |
| 检测滚动方向 | 比较 `offset` 变化 |
| 滚动到底部 | `jumpTo(maxScrollExtent)` |
| 滚动到顶部 | `jumpTo(0)` |
| 更细粒度监听 | `NotificationListener<ScrollNotification>` |

---

如果你有具体的场景（如分页加载、下拉刷新等），我可以进一步提供示例代码或优化建议！