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)

🔹 一、Shader 原理

液态玻璃的实现靠 GPU Shader 来做图像处理：

1. 形状定义：用 SDF（Signed Distance Field）定义玻璃的区域（矩形 + 圆角）。
2. 背景折射：在玻璃区域内，用一个偏移的 UV 坐标采样背景，让背景产生扭曲效果，看起来像“玻璃折射”。
3. 光照和阴影：在边缘和中心添加光照/阴影，让玻璃有厚度和质感。
4. 最终混合：玻璃区域 → 使用折射后的背景；非玻璃区域 → 保持原始背景。

🔹 二、Flutter 使用方法

1. 添加 shader 文件

在 assets/shaders/liquidglass.frag 写入你的代码，并在 pubspec.yaml 声明：

flutter:   
  assets:
   - assets/shaders/liquidglass.frag

2. 在 Dart 中加载 shader

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

late ui.FragmentShader shader;

Future<void> 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 中使用

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)

这个官方收录的实现库，是作者体验下来最好用的一个了，接下就着重介绍一下 oc_liquid_glass。
下面展示两个核心场景：固定玻璃效果 与 可拖拽按钮。

一、基本液态玻璃效果

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，同一组内的玻璃会自然融合。

二、可拖拽液态玻璃按钮

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)

核心原理：

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)

核心理论可概括为三点：

1. 背景模糊（Blur）
   • 通过 backdrop-filter: blur() 或高斯模糊让玻璃背后的内容柔和，形成半透明玻璃视觉效果。
2. 折射扭曲（Displacement / Refraction）
   • 利用位移映射（SVG feDisplacementMap 或 Shader）按 RGB 通道偏移背景，实现光线穿过玻璃时的折射和液态效果。
3. 光泽高光（Specular Highlights）
   • 通过光带、颜色混合、透明叠加等方式在玻璃表面生成高光，使玻璃看起来有反光和立体感。

---

4️⃣ 总结

液态玻璃 不仅是一种视觉效果，更是现代 UI 设计对真实光学现象的模拟与探索。
无论是在移动端的 iOS 界面，还是在 Flutter、React、Vue 等前端开发中，它都为界面增添了质感与交互趣味。

👏👏👏让我们用液态玻璃，让界面更酷、更灵动！