前言

在处理大规模数据流（如快消品目录、社交媒体瀑布流）时，一次性加载所有数据不仅会造成内存溢出，还会严重拖慢首屏渲染速度。无限加载（Infinite Loading） 通过分时、分页的数据索取机制，配合 骨架屏（Skeleton Screen） 的视觉占位，实现了数据流在用户感知层面的“无限循环”与“无缝下钻”。

本文将解析如何通过 ScrollController 监听视口边界，并利用离散的状态机模型管理分页加载逻辑，同时设计一套具有“呼吸感”的骨架屏动画。

---

目录

1. 分页加载的数学模型：阈值触发函数
2. 状态监听与并发控制：避免重复请求
3. 骨架屏美学：从静态占位到动态呼吸
4. 核心代码：构建 PaginationEngine
5. 总结与展望

---

1. 分页加载的数学模型：阈值触发函数

无限加载的核心在于判断何时触发下一页的请求。我们不应在用户滑动到最后一像素时才请求，而应设置一个预加载阈值（Preload Threshold）。

设视口最大滚动范围为 $L_{max}$，当前滚动偏移量为 $O_{current}$，触发阈值为 $T$。
触发加载的逻辑判定公式为：
[ f(O_{current}) = \begin{cases} 1, & \text{if } L_{max} - O_{current} \le T \ 0, & \text{otherwise} \end{cases} ]

其中 $T$ 通常取 1.5 到 2 倍的屏幕高度，以保证用户在滑动过程中感知不到数据的“断裂”。

1.1 状态机模型 (UML 状态图)

---

2. 状态监听与并发控制：避免重复请求

在 ScrollController 的监听回调中，由于滑动事件触发频率极高（每秒 60-120 次），必须引入锁定机制（Locking Mechanism），防止在同一时刻发起多个重复的分页请求。

2.1 监听逻辑流程图

---

3. 骨架屏美学：从静态占位到动态呼吸

骨架屏不应只是灰色的方块。在鸿蒙的高端 UI 设计中，骨架屏通常带有线性渐变扫光（Shimmer Effect）。

3.1 扫光函数解析

设扫光背景色为 $C_b$，高亮色为 $C_h$，时间变量为 $t$。
扫光动画的位移 $x$ 与透明度 $\alpha$ 的关系可近似表示为：
[ \alpha(x, t) = \sin\left(\frac{x - v \cdot t}{w} \cdot \pi\right) ]
其中 $v$ 为扫光速度，$w$ 为扫光宽度。在 Flutter 中，我们利用 LinearGradient 的 stops 属性实现该动态映射。

---

4. 核心代码：构建 PaginationEngine

以下是在 lib/main.dart 中实现无限加载与骨架屏的核心逻辑。

4.1 骨架屏组件实现

class ShimmerBox extends StatefulWidget {
  final double width, height;
  const ShimmerBox({super.key, required this.width, required this.height});

  @override
  State<ShimmerBox> createState() => _ShimmerBoxState();
}

class _ShimmerBoxState extends State<ShimmerBox> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 1500))..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Container(
          width: widget.width,
          height: widget.height,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            gradient: LinearGradient(
              colors: [Colors.grey[300]!, Colors.grey[100]!, Colors.grey[300]!],
              stops: [0.0, _controller.value, 1.0],
              begin: const Alignment(-1, -0.3),
              end: const Alignment(1, 0.3),
            ),
          ),
        );
      },
    );
  }
}

---

5. 总结与展望

无限加载与骨架屏的组合，本质上是对不可避免的网络延迟进行视觉上的“平滑处理”。通过科学的触发阈值算法与优雅的状态机控制，我们能让原本干涩的数据请求过程变得富有律动感。

在下一章中，我们将进一步进阶，探讨 “视差滚动（Parallax Scrolling）：打破平面布局的深度维度”，让您的鸿蒙应用在视觉深度上更上一层楼。

---

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