2025 年 9 月 15 日苹果重磅推出 iOS26，在界面引入全新的 Liquid Glass（液态玻璃）设计语言，让系统控件具有玻璃质感、透明折射和动态效果。
作者也是迫不及待地下载体验了一番，用起来还是十分丝滑酷炫的🎉🎉🎉，是苹果继 iOS 7 和 14 之后的一重大革新。
对 Flutter 开发者来说😁😁😁，也是一种全新的设计风格了。
那么作为 Flutter 界的新兵蛋子，我必然要尝尝咸淡，自己写👋👋👋那是不可能的。
因此，尝试了网上很多开源的液态玻璃库，还是有不少收获的，在此分享给大家。
1️⃣ 着色器（Shader）实现
指南针\]([GitHub - xhzq233/liquid_glass_example: Example of liquid glass effect in Flutter](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fxhzq233%2Fliquid_glass_example "https://github.com/xhzq233/liquid_glass_example")) 
### 🔹 一、Shader 原理
液态玻璃的实现靠 GPU Shader 来做图像处理：
1. **形状定义**：用 SDF（Signed Distance Field）定义玻璃的区域（矩形 + 圆角）。
2. **背景折射**：在玻璃区域内，用一个偏移的 UV 坐标采样背景，让背景产生扭曲效果，看起来像"玻璃折射"。
3. **光照和阴影**：在边缘和中心添加光照/阴影，让玻璃有厚度和质感。
4. **最终混合**：玻璃区域 → 使用折射后的背景；非玻璃区域 → 保持原始背景。
### 🔹 二、Flutter 使用方法
#### 1. 添加 shader 文件
在 `assets/shaders/liquidglass.frag` 写入你的代码，并在 `pubspec.yaml` 声明：
```yaml
flutter:
assets:
- assets/shaders/liquidglass.frag
```
#### 2. 在 Dart 中加载 shader
```dart
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
late ui.FragmentShader shader;
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
// 1. 加载 shader 程序
final program = await ui.FragmentProgram.fromAsset('shaders/liquidglass.frag');
// 2. 创建 shader 实例
shader = program.fragmentShader();
runApp(const MyApp());
}
```
#### 3. 在 Widget 中使用
```dart
class LiquidGlassCard extends StatelessWidget {
final Widget child;
const LiquidGlassCard({super.key, required this.child});
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: _GlassPainter(),
child: child,
);
}
}
class _GlassPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// 给 shader 传入 uniform 参数
shader.setFloat(0, size.width); // u_resolution.x
shader.setFloat(1, size.height); // u_resolution.y
shader.setFloat(2, size.width/2); // u_mouse.x (例子：居中)
shader.setFloat(3, size.height/2);// u_mouse.y
// 用 Paint 绘制
final paint = Paint()..shader = shader;
canvas.drawRect(Offset.zero & size, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
```
*** ** * ** ***
## **2️⃣ oc_liquid_glass**
\[指南针\]([oc_liquid_glass example \| Flutter package](https://link.juejin.cn?target=https%3A%2F%2Fpub.dev%2Fpackages%2Foc_liquid_glass%2Fexample "https://pub.dev/packages/oc_liquid_glass/example")) 
这个官方收录的实现库，是作者体验下来最好用的一个了，接下就着重介绍一下 oc_liquid_glass。 下面展示两个核心场景：**固定玻璃效果** 与 **可拖拽按钮**。
### 一、基本液态玻璃效果
```dart
OCLiquidGlassGroup(
// 全局液态玻璃效果配置
settings: OCLiquidGlassSettings(
refractStrength: refractStrength, // 折射强度
blurRadiusPx: blurRadiusPx, // 模糊半径
specStrength: specStrength, // 高光亮度
blendPx: blendPx, // 边缘过渡范围
distortFalloffPx: distortFalloffPx, // 扭曲衰减范围
specAngle: specAngle, // 高光角度
specWidth: specWidth, // 高光宽度
specPower: specPower, // 高光锐利度
lightbandColor: Colors.black, // 光带颜色
),
// 子组件：单个玻璃容器
child: OCLiquidGlass(
borderRadius: 100, // 圆角
color: primaryColor.withValues(alpha: colorAlpha), // 玻璃色 + 透明度
child: child, // 放入需要展示的内容
),
)
```
> 📌 要点：
>
> 1. `settings` 配置整个组的基本属性，`borderRadius` 和 `color + alpha` 控制单个玻璃容器的整体透明度与色调。
> 2. `OCLiquidGlassGroup` 可以包含多个 `OCLiquidGlass`，同一组内的玻璃会自然融合。
### 二、可拖拽液态玻璃按钮
```dart
LayoutBuilder(
builder: (context, constraints) {
// 初始化按钮位置：底部居中
_position1 ??= Offset(
(constraints.maxWidth - 100) / 2, // 水平居中
(constraints.maxHeight - 100) - 70, // 距底部 70
);
return Stack(
children: [
// 页面内容
SingleChildScrollView(
child: Column(
children: [
UserInfoCard(),
SportTaskPage(items: controller.tasks),
const SizedBox(height: 50),
],
),
),
// 可拖拽的液态玻璃按钮
Positioned(
left: _position1!.dx,
top: _position1!.dy,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
// 更新位置并限制在屏幕范围内
_position1 = Offset(
(_position1!.dx + details.delta.dx)
.clamp(0.0, constraints.maxWidth - 100),
(_position1!.dy + details.delta.dy)
.clamp(0.0, constraints.maxHeight - 100),
);
});
},
child: Center(
child: LiquidGlass(
colorAlpha: 0.5, // 半透明玻璃
child: StartTrainingPage(items: controller.tasks), // 按钮内容
),
),
),
),
],
);
},
);
```
> 📌 要点：
>
> 1. `Positioned + GestureDetector` 实现拖拽效果。
> 2. `LayoutBuilder` 保证按钮在不同屏幕尺寸下能正确计算初始位置。
> 3. `LiquidGlass` 渲染出玻璃质感，内部放置自定义按钮。
### 三、效果演示
可拖动的液态玻璃按钮 \& 液态玻璃底部导航栏：
*** ** * ** ***
## **3️⃣ 其他平台扩展**
### 一、React 实现（3D 模型液态玻璃）
\[指南针\]([React Bits - Fluid Glass](https://link.juejin.cn?target=https%3A%2F%2Freactbits.dev%2Fcomponents%2Ffluid-glass "https://reactbits.dev/components/fluid-glass")) 
**核心原理：**
1. **3D 模型渲染**
* 组件 `FluidGlass` 接收 `mode` 参数，可选择 `"lens"`、`"bar"` 或 `"cube"`。
* 对应模型需放在 `public/assets/3d` 目录下，例如 `lens.glb`。
* 使用 `three.js` 或 `react-three-fiber` 加载 `.glb` 文件，实现 3D 渲染。
2. **液态玻璃光学参数**
* `scale`：模型缩放比例。
* `ior`（折射率）：控制光线通过玻璃时的弯曲程度。
* `thickness`：玻璃厚度，影响光学扭曲。
* `chromaticAberration`：色差，模拟光在不同波长下的折射差异。
* `anisotropy`：各向异性，影响表面不同方向折射强度。
3. **可扩展性**
* `lensProps`、`barProps`、`cubeProps` 可分别定制不同模型参数。
* 支持多模型组合，实现多样化液态玻璃效果。
*** ** * ** ***
### 二、Vue 实现（前端液态玻璃）
\[指南针\]([Vue Bits - Glass Surface](https://link.juejin.cn?target=https%3A%2F%2Fvue-bits.dev%2Fcomponents%2Fglass-surface "https://vue-bits.dev/components/glass-surface")) 
**核心理论可概括为三点：**
1. **背景模糊（Blur）**
* 通过 `backdrop-filter: blur()` 或高斯模糊让玻璃背后的内容柔和，形成半透明玻璃视觉效果。
2. **折射扭曲（Displacement / Refraction）**
* 利用位移映射（SVG `feDisplacementMap` 或 Shader）按 RGB 通道偏移背景，实现光线穿过玻璃时的折射和液态效果。
3. **光泽高光（Specular Highlights）**
* 通过光带、颜色混合、透明叠加等方式在玻璃表面生成高光，使玻璃看起来有反光和立体感。
*** ** * ** ***
## **4️⃣ 总结**
`液态玻璃` 不仅是一种视觉效果，更是现代 UI 设计对真实光学现象的模拟与探索。
无论是在移动端的 iOS 界面，还是在 **Flutter** 、**React** 、**Vue** 等前端开发中，它都为界面增添了质感与交互趣味。
**👏👏👏让我们用液态玻璃，让界面更酷、更灵动！**