PageController 如何设置页面抖动 - Dart

在 Dart 编程语言中使用 PageController 可以让我们轻松实现页面抖动效果。PageController 是一个用于控制 PageView 滚动的工具类，它可以让我们滚动到指定的页面，并且可以监听滚动事件。

使用 PageController 控制页面抖动

要使用 PageController 控制页面抖动，需要先创建一个 PageController 实例，并将其绑定到 PageView 上。然后在需要触发抖动效果的时候，可以使用 PageController 的 jumpToPage() 方法将页面滚动到目标位置，接着在一定时间范围内连续地使用 jumpToPage() 方法将页面来回滚动，从而产生抖动的效果。

下面是一个简单的示例代码，演示了如何使用 PageController 实现页面抖动效果：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PageController 如何设置页面抖动',
      home: Scaffold(
        appBar: AppBar(
          title: Text('PageController 如何设置页面抖动'),
        ),
        body: PageView(
          controller: _controller,
          children: <Widget>[
            Container(
              color: Colors.blue,
            ),
            Container(
              color: Colors.green,
            ),
            Container(
              color: Colors.yellow,
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: startShakeAnimation,
          child: Icon(Icons.vibration),
        ),
      ),
    );
  }

  final PageController _controller = PageController(initialPage: 0);

  Future<void> startShakeAnimation() async {
    const int duration = 3; // 3 秒钟
    const int frameCount = 60; // 每秒 60 帧
    const double shakeDelta = 8.0; // 每次抖动的偏移量
    const double shakeInterval = 1 / 60; // 每次抖动的时间间隔

    final int shakeFrameCount = duration * frameCount;
    double offset = 0.0;

    for (int i = 0; i < shakeFrameCount; i++) {
      _controller.jumpToPage(i % 3);
      await Future.delayed(Duration(milliseconds: (shakeInterval * 1000).round()));
      offset = (i % 2 == 0) ? shakeDelta : -shakeDelta;
      _controller.animateTo(_controller.offset + offset, duration: Duration(milliseconds: 16), curve: Curves.easeInOut);
    }
  }
}

在这个示例代码中，我们创建了一个 PageView，里面包含了三个颜色不同的 Container，分别是蓝色、绿色和黄色。接着我们创建了一个 FloatingActionButton，当用户点击该按钮的时候，会触发 startShakeAnimation() 方法。

在 startShakeAnimation() 方法中，我们通过 PageController 控制 PageView 的滚动来实现页面抖动效果。首先，我们定义了一些基本的参数，比如抖动的持续时间、抖动的次数、每次抖动偏移量的大小等。

然后，我们在一个 for 循环中连续使用 jumpToPage() 和 animateTo() 方法进行页面滚动。每一次循环都会将页面滚动到下一个位置，并且在一定的时间内进行偏移，从而使页面产生抖动的效果。注意，我们在偏移页面的时候使用的是 animateTo() 方法，而不是 jumpToPage() 方法，这是因为 animateTo() 方法可以产生平滑的过渡效果，使抖动效果看起来更加自然。

总结

使用 PageController 可以帮助我们轻松地实现页面抖动效果。通过控制 PageView 的滚动，我们可以使页面产生连续的抖动效果，从而增加应用程序的趣味性和互动性。