Test

这是博客的第一篇帖子，用来测试整个页面的排版与组件是否正常工作。 后续的文章都会以这种卡片的形式展示在主页上。

这一篇特别长，是为了让顶部的阅读进度指示器能跑起来。 滚动页面时，你会看到顶栏底部的蓝色横条随着阅读进度缓慢增长。

为什么需要进度指示器

长文章需要一个视觉锚点，让读者知道自己在文章中的位置，还剩多少没读。 Material 3 提供了两种进度指示器：线性（Linear）和环形（Circular）。 对于顶部阅读进度这种场景，线性进度条最合适。

实现方式很简单：监听滚动事件，计算「已滚过的距离」与「文章总可滚动距离」 的比例，把这个 0 到 1 之间的值赋给 md-linear-progress 的 value 属性。组件会自动处理动画和颜色。

M3 进度指示器规范

按 M3 规范，线性进度条有以下几个关键属性：

• Track height：默认 4dp，可以调整。
• Active indicator：已完成部分的颜色，默认使用主色。
• Track color：未完成部分的颜色，可以用 surfaceVariant。
• Value：0 到 1 的浮点数，表示确定型进度。

如果不需要精确进度，可以省略 value 属性，组件会进入 indeterminate 状态，显示循环动画，适合「加载中」这类未知时长的情况。

和文章页的集成

进度条放在顶部 App Bar 的最下方，绝对定位到 bottom: 0， 宽度拉满，高度设为 3dp 到 4dp，视觉上就像 App Bar 下边缘的一条细线。 颜色使用主题主色 #0B57D0，暗色模式下自动切换为 #A8C7FA，两种主题下都清晰可见。

为了让滚动监听性能更好，使用了 { passive: true } 选项， 告诉浏览器这个监听器不会调用 preventDefault， 浏览器可以立即滚动页面而不等待回调执行。

小结

Material 3 的组件库还在不断完善，很多常用的模式（比如 Snackbar、阅读进度） 需要开发者按规范手动组合。但只要理解每个组件的语义和令牌系统， 实现起来并不复杂，而且能保证视觉和交互的一致性。

滚动一下试试吧。感谢阅读。