前言

在追求极致体验的移动应用（如高端品牌详情、社交主页）中，平庸的滚动效果往往难以打动用户。视差滚动（Parallax Scrolling） 通过让背景与前景以不同的速率移动，在二维屏幕上创造出三维深度的错觉。

在 Flutter 的滚动体系中，CustomScrollView 与 Sliver 系列组件是实现这一高级交互的基石。本文将深入探讨视差系数的物理映射，并利用 SliverPersistentHeader 构建一个具有沉浸感的品牌详情头部。

---

目录

1. 视差几何学：位移差的线性映射
2. Sliver 协议：吸顶与收缩的生命周期
3. 核心代码：构建 ParallaxSliverHeader
4. 鸿蒙适配：高刷屏幕下的平滑曲线优化
5. 总结与展望

---

1. 视差几何学：位移差的线性映射

视差的核心数学原理是相对速度。
设视口的滚动总偏移量为 $\Delta y$，背景层的位移为 $\Delta y_{bg}$，前景层的位移为 $\Delta y_{fg}$。
我们定义视差系数为 $k$（$0<k<1$），则：

基础理解：

进阶理解：

当 $k=0.5$ 时，背景看起来像是在更远的空间，移动速度仅为前景的一半。

1.1 投影变换流程图

---

2. Sliver 协议：吸顶与收缩的生命周期

SliverPersistentHeader 的强大之处在于其 SliverPersistentHeaderDelegate。它允许我们精确控制组件在收缩（Collapsing）过程中的每一像素变化。

• minExtent: 头部完全收缩后的最小高度（通常为 AppBar 高度）。
• maxExtent: 头部完全展开时的最大高度。
• shrinkOffset: 当前的收缩偏移量，是计算视差的关键参数。

2.2 UML 类图设计

---

3. 核心代码：构建 ParallaxSliverHeader

以下是实现视差效果的核心 Delegate 代码。

class ParallaxHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double maxHeaderHeight;
  final double minHeaderHeight;

  ParallaxHeaderDelegate({
    required this.maxHeaderHeight,
    required this.minHeaderHeight,
  });

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    // 计算收缩百分比 (0.0 -> 1.0)
    final double percent = shrinkOffset / maxHeaderHeight;
    
    return Stack(
      children: [
        // 1. 背景层 (带视差位移)
        Positioned(
          top: -shrinkOffset * 0.5, // 视差系数 k = 0.5
          left: 0,
          right: 0,
          height: maxHeaderHeight,
          child: Image.asset(
            'assets/images/explore_ohos.png',
            fit: BoxFit.cover,
          ),
        ),
        // 2. 遮罩层 (随滚动加深)
        Container(
          color: Colors.black.withOpacity(percent.clamp(0.0, 0.6)),
        ),
        // 3. 前景内容 (标题与信息)
        Positioned(
          bottom: 20 + (shrinkOffset * 0.1), // 标题略微上浮
          left: 20,
          child: Opacity(
            opacity: (1 - percent * 2).clamp(0.0, 1.0),
            child: Text('HarmonyOS Luxury', style: TextStyle(color: Colors.white, fontSize: 32, fontWeight: FontWeight.bold)),
          ),
        ),
      ],
    );
  }

  @override
  double get maxExtent => maxHeaderHeight;

  @override
  double get minExtent => minHeaderHeight;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => true;
}

---

4. 鸿蒙适配：高刷屏幕下的平滑曲线优化

在鸿蒙设备（如 Mate 系列）的 120Hz 高刷屏上，任何计算上的微小跳变都会被放大。

• 插值优化：避免直接使用线性偏移，可以引入 Curves.easeInOut 对 percent 进行二次处理，使视差过渡更具丝滑感。
• 渲染边界：为背景图添加 RepaintBoundary，确保头部视差计算不会导致下方的列表频繁重绘。

---

5. 总结与展望

视差布局是“循环交互艺术”中打破平面次元的关键一步. 它利用简单的线性映射，赋予了应用深度感。下一章，我们将挑战更复杂的 “3D 轮播：基于 Transform 的透视变换”，让交互从 2.5D 正式步入 3D 视觉领域。

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net