如何使用PageView.builder实现答题应用页面切换重叠效果

默认PageView的页面布局为线性排列，默认不存在层叠关系，按以下改造即可实现答题类应用的卡片重叠滑动效果：

核心实现逻辑 #

• 给PageController设置合适的viewportFraction，让相邻页面可以露出边缘
• 通过AnimatedBuilder监听PageController的滚动偏移，实时计算每个页面的位移、缩放参数
• 调整页面堆叠顺序，让后序页面默认位于当前页面的下层，滑动时逐步向上移动进入视野

代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<QuestionPageView> createState() => _QuestionPageViewState();
}

class _QuestionPageViewState extends State<QuestionPageView> {
  // 配置viewportFraction控制单页占比，小于1即可露出相邻页边缘
  final PageController _pageController = PageController(viewportFraction: 0.92);

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

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: _pageController,
      scrollDirection: Axis.vertical, // 答题应用通常上下滑动，可按需改为horizontal
      itemCount: 20, // 替换为实际题目总数
      itemBuilder: (context, index) {
        return AnimatedBuilder(
          animation: _pageController,
          builder: (context, child) {
            double offset = 0;
            double scale = 1;
            if (_pageController.position.haveDimensions) {
              // 计算当前页面和中心点的差值
              final pageDiff = index - (_pageController.page ?? 0);
              // 控制重叠偏移量，数值越大重叠程度越高
              offset = pageDiff * 40;
              // 控制非选中页面的缩放比例，增强层级感
              scale = 1 - (pageDiff.abs() * 0.04).clamp(0, 0.08);
            }
            return Transform(
              transform: Matrix4.identity()
                ..translate(0, offset < 0 ? offset : 0)
                ..scale(scale),
              alignment: Alignment.topCenter,
              child: child,
            );
          },
          // 替换为实际的题目卡片组件
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(18),
              boxShadow: const [
                BoxShadow(
                  color: Colors.black12,
                  blurRadius: 10,
                  offset: Offset(0, 4),
                )
              ],
            ),
            child: Center(
              child: Text(
                "第 $index 题",
                style: const TextStyle(fontSize: 24, fontWeight: FontWeight.w500),
              ),
            ),
          ),
        );
      },
    );
  }
}

效果调整参数说明 #

• 修改viewportFraction：数值越接近1，相邻页面露出的边缘越少
• 调整offset = pageDiff * 40中的40：数值越大，卡片重叠的程度越高
• 调整缩放系数：可以根据设计需求修改非选中页面的缩小比例，甚至添加透明度参数实现渐显效果
• 滑动方向：如果需要左右滑动切换，把scrollDirection改为Axis.horizontal，同时修改translate的x轴偏移即可

内容的提问来源于stack exchange，提问作者Kerim Mandacı