前言
在追求极致体验的移动应用（如高端品牌详情、社交主页）中，平庸的滚动效果往往难以打动用户。视差滚动（Parallax Scrolling） 通过让背景与前景以不同的速率移动，在二维屏幕上创造出三维深度的错觉。
在 Flutter 的滚动体系中，CustomScrollView 与 Sliver 系列组件是实现这一高级交互的基石。本文将深入探讨视差系数的物理映射，并利用 SliverPersistentHeader 构建一个具有沉浸感的品牌详情头部。
目录
- 视差几何学：位移差的线性映射
- [Sliver 协议：吸顶与收缩的生命周期](#Sliver 协议：吸顶与收缩的生命周期)
- [核心代码：构建 ParallaxSliverHeader](#核心代码：构建 ParallaxSliverHeader)
- 鸿蒙适配：高刷屏幕下的平滑曲线优化
- 总结与展望
1. 视差几何学：位移差的线性映射
视差的核心数学原理是相对速度 。
设视口的滚动总偏移量为 Δ y \Delta y Δy，背景层的位移为 Δ y b g \Delta y_{bg} Δybg，前景层的位移为 Δ y f g \Delta y_{fg} Δyfg。
我们定义视差系数为 k k k（ 0 < k < 1 0 < k < 1 0<k<1），则：
基础理解：
进阶理解：
![[ \Delta y_{bg} = k \cdot \Delta y ]
\Delta y_{fg} = \Delta y \]](https://i-blog.csdnimg.cn/direct/2aff5b89d2f7478dbc91797eabe9d899.png)
当 k = 0.5 k=0.5 k=0.5 时，背景看起来像是在更远的空间，移动速度仅为前景的一半。
##### 1.1 投影变换流程图
用户滑动 Δy
SliverConstraints
前景层位移: Δy
背景层位移: k \* Δy
混合渲染输出
*** ** * ** ***
#### 2. Sliver 协议：吸顶与收缩的生命周期
`SliverPersistentHeader` 的强大之处在于其 `SliverPersistentHeaderDelegate`。它允许我们精确控制组件在收缩（Collapsing）过程中的每一像素变化。
* **minExtent**: 头部完全收缩后的最小高度（通常为 AppBar 高度）。
* **maxExtent**: 头部完全展开时的最大高度。
* **shrinkOffset**: 当前的收缩偏移量，是计算视差的关键参数。
##### 2.2 UML 类图设计
\<\\>
SliverPersistentHeaderDelegate
+double minExtent
+double maxExtent
+build(context, shrinkOffset, overlapsContent)
+shouldRebuild(oldDelegate)
ParallaxHeaderDelegate
+Widget background
+Widget foreground
+double k
*** ** * ** ***
#### 3. 核心代码：构建 ParallaxSliverHeader
以下是实现视差效果的核心 Delegate 代码。
```dart
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 视觉领域。
*** ** * ** ***
欢迎加入开源鸿蒙跨平台社区：