更新记录

1.0.0（2026-09-24） 下载此版本

首版发布，适配全端。

平台兼容性

uni-app x(5.26)

fc-liquid-glass 液态玻璃组件

uni-app x 液态玻璃 / 毛玻璃组件，各端采用最合适的原生方案。完全开源。

基础用法

组件需放在有内容 / 背景的区域之上，才能透出模糊。

<template>
  <view class="page">
    <image class="bg" src="/static/bg.jpg" mode="aspectFill"></image>

    <fc-liquid-glass :corner-radius="28" :blur="20" style="width: 300px;">
      <text class="title">Liquid Glass</text>
    </fc-liquid-glass>
  </view>
</template>

Props

暗黑模式支持

全端自动适配暗黑模式（需 HBuilderX 5.25+）：

暗黑模式下自动调整：

• 描边颜色：亮色模式白色半透明 → 暗黑模式深色半透明
• 高光层：亮色模式强高光 → 暗黑模式柔和高光
• 玻璃叠加色：亮色模式浅色 → 暗黑模式深色

无需额外配置，组件会自动响应系统或 App 主题变化。

平台注意事项

iOS

• glass-effect-view 需 HBuilderX 5.25+ / uni-app x 蒸汽模式。
• glass-style 在 iOS 26 以下映射为标准/更通透毛玻璃材质。
• interactive、tint-color 仅 iOS 26+ 生效。
• 暗黑模式：系统原生组件自动跟随 iOS 系统主题，无需配置。

Android

• Android 13+ 需要自定义基座：组件依赖第三方原生库，标准基座不包含该依赖。请在 HBuilderX 中「发行 → App-Andriod/iOS-云打包 → 制作自定义基座」后再运行。
• Android <13：自动降级为高斯模糊实现，页面复杂或同屏大量使用会有性能开销；无法采集视频等独立 Surface 内容。
• 多玻璃共存：支持多个玻璃组件同时使用，组件会自动查找合适的背景层进行模糊处理。但不支持液态玻璃上套液态玻璃。
• 原生视图限制：组件不支持 CSS border/background/box-shadow，圆角由组件内部处理。
• 暗黑模式：需 HBuilderX 5.25+ 支持 CSS 媒体查询，自动跟随系统或 App 主题。

鸿蒙

• 平台差异：
  • ✅ 支持 cornerRadius/blurRadius/dispersion 参数。
  • ❌ 不支持 tintColor/overlayColor 着色层参数，这两个参数在鸿蒙端会被忽略。
  • ✅ 真液态玻璃效果：边缘折射 + 色散 + 背景模糊 + 玻璃扭曲。
• 暗黑模式：需 HBuilderX 5.25+ 支持 CSS 媒体查询，自动跟随系统主题。

Web

• Chromium 真折射：使用 SVG 滤镜实现折射和色散，仅 Chromium 内核（Chrome/Edge）支持。
• Safari/Firefox 降级：自动降级为标准毛玻璃效果。
• 无需额外配置：组件自动处理所需的 SVG 滤镜注入，无需修改 index.html。
• 暗黑模式：需 HBuilderX 5.25+ 支持 CSS 媒体查询，自动跟随浏览器主题。

小程序

• ⚠️ 不支持液态玻璃：平台 API 限制无法实现液态玻璃效果。

尺寸说明

组件宽高由外部样式决定。给组件绑定 style 或 class 设置 width / height（未设置时按内容自适应）。

示例

基础用法

<template>
  <view class="page">
    <image class="bg" src="/static/bg.jpg" mode="aspectFill"></image>

    <!-- 基础玻璃卡片 -->
    <fc-liquid-glass :corner-radius="28" :blur-radius="20" style="width: 300px;">
      <text class="title">Liquid Glass</text>
    </fc-liquid-glass>
  </view>
</template>

<style>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 750rpx;
  height: 100vh;
}
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.title {
  font-size: 24px;
  color: #ffffff;
}
</style>

调整折射强度（Android 13+/鸿蒙/Web Chromium）

<fc-liquid-glass
  :corner-radius="28"
  :blur-radius="20"
  :dispersion="0.5"
  style="width: 300px;">
  <text>折射强度 0.5</text>
</fc-liquid-glass>

iOS 样式定制

<!-- iOS 26+ 透明液态玻璃 + 交互 -->
<fc-liquid-glass
  glass-style="clear"
  :interactive="true"
  tint-color="#007AFF"
  style="width: 300px;">
  <text>iOS Clear Glass</text>
</fc-liquid-glass>

多玻璃共存

<view class="container">
  <image class="backdrop" src="/static/bg.jpg"></image>

  <fc-liquid-glass :corner-radius="20" style="width: 200px; margin: 10px;">
    <text>玻璃 1</text>
  </fc-liquid-glass>

  <fc-liquid-glass :corner-radius="20" style="width: 200px; margin: 10px;">
    <text>玻璃 2</text>
  </fc-liquid-glass>
</view>

性能建议

1. 避免过度使用：每个玻璃组件都会触发模糊计算或着色器渲染，同屏不建议超过 5 个。
2. 固定尺寸优先：给玻璃组件设置明确的 width/height，避免频繁重排触发重新计算。
3. Android <13 降级优化：复杂页面考虑降低 blurRadius 或减少玻璃数量，避免逐帧模糊开销。
4. 鸿蒙着色层替代：需要玻璃叠加色时可在玻璃内容上自行添加半透明 view。

注意

1. 不建议液态玻璃上套液态玻璃显示，可能会有问题（没测过）。
2. 仅在蒸汽模式项目下进行了测试。鸿蒙端仅在模拟器中进行了测试6.1.1(24)。
3. 各端显示还是有些小差异的。

License

MIT