Flutter PageView.Builder：实现显示第二页20%后复位的引导动画

不用animateToPage这种直接跳转到整页的方法，而是通过PageController.animateTo()精准控制偏移量：先滑到第二页露出20%宽度的位置，再滑回初始位置，就能做出提示用户视图中还有更多卡片的动画效果。

完整代码示例 #

import 'package:flutter/material.dart';

class PageViewHintAnimation extends StatefulWidget {
  const PageViewHintAnimation({super.key});

  @override
  State<PageViewHintAnimation> createState() => _PageViewHintAnimationState();
}

class _PageViewHintAnimationState extends State<PageViewHintAnimation> {
  final PageController _pageController = PageController();
  double _pageWidth = 0;

  @override
  void initState() {
    super.initState();
    // 等页面布局完成再触发动画，避免获取不到宽度
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _playHintAnimation();
    });
  }

  void _playHintAnimation() async {
    if (_pageWidth == 0) return;
    // 先滑出第二页20%的宽度
    await _pageController.animateTo(
      -_pageWidth * 0.2,
      duration: const Duration(milliseconds: 400),
      curve: Curves.easeOut,
    );
    // 滑回初始位置
    await _pageController.animateTo(
      0,
      duration: const Duration(milliseconds: 400),
      curve: Curves.easeIn,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          // 实时获取PageView的宽度，确保偏移量计算准确
          _pageWidth = constraints.maxWidth;
          return PageView.builder(
            controller: _pageController,
            itemCount: 5,
            itemBuilder: (context, index) {
              return Card(
                margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
                color: Colors.primaries[index % Colors.primaries.length],
                child: Center(
                  child: Text(
                    '卡片 ${index + 1}',
                    style: const TextStyle(fontSize: 24, color: Colors.white),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
}

关键细节说明 #

• 获取PageView宽度：用LayoutBuilder拿到当前页面的最大宽度，保证偏移量计算精准。
• 偏移量逻辑：PageView的偏移量以初始位置为基准，向左滑（露出右侧页面）需要用负数值，-pageWidth * 0.2刚好让第二页露出20%宽度。
• 动画时序：用await让两个动画依次执行，先滑出再复位，不会出现动画重叠的情况。
• 曲线优化：搭配Curves.easeOut和Curves.easeIn曲线，让滑动动作更顺滑自然，没有机械感。

可选优化方向 #

• 可以加个定时重复逻辑，比如用Timer.periodic让提示动画每隔一段时间触发一次，但注意不要过于频繁干扰用户操作。
• 根据设备尺寸调整动画时长，比如平板上适当延长动画时间，适配大屏操作习惯。

内容的提问来源于stack exchange，提问作者Suriya