终于来了！Flutter 拥有了一个可用的液态玻璃解决方案！

关注微信公众号： OpenFlutter

简史回顾。

以前的尝试及其不足之处

让我们来看看 pub.dev（Flutter 包管理网站）。

如果我们搜索 liquid glass（液态玻璃），我们会找到以下几个软件包：

软件包名称	关键问题和评价
liquid_glass	无示例，无 GitHub 链接。有些可疑。
liquid_glass_renderer	非常优秀，高票支持，跨平台，可能是目前最好的尝试。但仅适用于 Impeller 渲染引擎，因此不支持 Windows 和 Web 平台。存在性能问题。
cupertino_native	使用原生 iOS 组件。由 Serverpod 创始人周末匆忙编写。非跨平台。
adaptive_platform_ui	根据平台渲染组件。非跨平台。
oc_liquid_glass	依赖 Impeller。在 Windows 和 Web 上不起作用。
liquid_glass_ui	仅一行代码实现了一个带有 `DropFilter.blur` 的常规玻璃拟物容器 (glassmorphic container) 。作者获得了一些赞和下载，但意义何在？😕
liquid_glass_ui_design	这可能是传统玻璃拟物设计（磨砂玻璃效果）中最完整的 UI 库。像前一个包一样，作者只是利用了"liquid"这个词。值得一试，但无论如何都不是液态玻璃。

总结一下 ：现有的解决方案要么依赖 Impeller ，要么使用原生 iOS 组件 ，因此无法实现跨平台 ；或者它们只是提供了常规的玻璃拟物设计，完全没有"液态"效果。

英雄登场

而我们的英雄是：

liquid_glass_easy

这是一个 Flutter 软件包，它能够添加实时、交互式的液态玻璃透镜（Liquid Glass Lenses）效果。这些动态透镜可以对底层内容进行放大、扭曲、模糊、着色和折射 处理，从而创造出引人注目的、玻璃般的视觉效果 ，并流畅地响应移动和触摸。

与传统的玻璃拟物（Glassmorphism）或静态模糊效果 不同，LiquidGlassEasy 模拟了真实的玻璃物理特性 ，包括完整的折射、扭曲和流体响应能力 。它能实时捕获并折射 （refract）实时背景内容，从而产生身临其境、响应动态 的视觉效果，为你的 UI 带来深度和真实感。

主要特性

💠 真实的液态玻璃视觉效果 ：以流动的透明度、柔和的高光和自然弯曲光线的折射，来重现真实玻璃的外观和物理特性。
🌀 实时透镜渲染 ：当元素在玻璃后面移动时，立即看到扭曲、模糊、着色和折射做出响应。
🎨 自定义形状 ：将透镜设计为圆角矩形、圆形或平滑的超椭圆，使其完美匹配你的界面风格。
🌈 完全可定制的效果 ：控制着色颜色、强度、柔和度、折射深度和光线方向，实现精确的玻璃行为。
🧠 控制器驱动的动画 ：通过 LiquidGlassController，实时显示、隐藏或动画化透镜。
⚙️ 着色器驱动、GPU 加速的管线 ：即使有多个动态透镜，也能确保平滑、高 FPS 的性能。
📱 跨平台兼容性 ：在 Android、iOS、Web、macOS 和 Windows 上无缝运行。

让我们一起尝试

将软件包添加到项目：

bash 复制代码

flutter pub add liquid_glass_easy

或者

yaml 复制代码

# 在 pubspec.yaml 文件中
dependencies:
  flutter:
    sdk: flutter
  liquid_glass_easy: ^[latest_version]

pub.dev 上的示例 (Example)标签页包含了官方示例，代码相当长，因此我不会在这里重新粘贴。

但我从中得到的信息是，我们需要使用两个组件（Widget）来创建液态玻璃效果： LiquidGlassView 和 LiquidGlass。

组件作用简述

组件名称	作用
`LiquidGlassView`	这是背景捕获器，它包裹住需要被"液态玻璃"效果影响的底层内容。它捕获其下方的实时渲染内容，并将该内容作为纹理提供给 `LiquidGlass`。
`LiquidGlass`	这是液态玻璃透镜本身。它必须位于 `LiquidGlassView` 内部，并利用捕获到的背景纹理，通过着色器渲染出折射、扭曲和模糊的动态效果。

dart 复制代码

LiquidGlassView(
          controller: viewController,
          backgroundWidget: Image.network(
                                 "https://raw.githubusercontent.com/AhmeedGamil/liquid_glass_easy_assets/refs/heads/main/flower.jpg",
                                fit: BoxFit.fitWidth,
                                width: double.infinity,
                                height: double.infinity,
                            ),
          pixelRatio: 1,
          useSync: true,
          realTimeCapture: true,
          refreshRate: LiquidGlassRefreshRate.deviceRefreshRate,
          children: [            
               LiquidGlass(
                controller: lensController,
                position:
                const LiquidGlassAlignPosition(alignment: Alignment.center),
                width: 100,
                height: 100,
                magnification: 1,
                enableInnerRadiusTransparent: false,
                diagonalFlip: 0,
                distortion: 0.225,
                distortionWidth: 50,
                draggable: true,
                outOfBoundaries: true,
                blur: LiquidGlassBlur(sigmaX: 0.75, sigmaY: 0.75),
                shape: RoundedRectangleShape(
                    //highDistortionOnCurves: true,
                    cornerRadius: 50,
                    borderWidth: 1,
                    borderSoftness: 2.5,
                    lightIntensity: 1.5,
                    lightDirection: 39.0),
              child:
                Container(
                  decoration:  BoxDecoration(borderRadius: BorderRadius.circular(50),),
                  child: InkWell(
                    borderRadius: BorderRadius.circular(50),
                      child: Container(
                          height: 50,
                          width: 50,
                          child: Icon(
                            color: Colors.white,
                          Icons.pause,
                            size: 36,
                          ))),
                ),
              ),

我们需要创建视图控制器（view controller）和透镜控制器（lens controller） ：

dart 复制代码

// 创建视图控制器：用于控制 LiquidGlassView 捕获的背景内容
final viewController = LiquidGlassViewController();
// 创建透镜控制器：用于控制 LiquidGlass 效果（例如：显示/隐藏/动画）
final lensController = LiquidGlassController();

然后我们会得到下面的：

GIF 画质比较低，是为了帮你节省流量 😉。 但这个液态玻璃效果很不错，对吧？

接下来，我们来看看同一个示例 App 中的更多例子。

文档

pub.dev 上的文档比较基础，但类（Classes）的注释很充分 ，并且提供了一个展示应用，允许用户试玩各种属性：

创建液态玻璃组件

文档中没有说明如何制作**"液态"组件。此外，这个软件包也没有提供任何即用型的液态组件**。

因此，我猜唯一且显而易见的方法是：将某个组件作为 LiquidGlass 的 child ，并将其设置为透明。

以下是我快速且粗糙 地尝试创建一个液态按钮：

dart 复制代码

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Liquid button'),
        centerTitle: true,
      ),
      body: LiquidGlassView(
        backgroundWidget:// Image.asset('assets/images/background/purple_texture_dark.webp', fit: BoxFit.cover),
         Image.network(
        "https://raw.githubusercontent.com/AhmeedGamil/liquid_glass_easy_assets/refs/heads/main/socotra_tree_2.jpg",
        fit: BoxFit.cover,
        width: double.infinity,
        height: double.infinity,
      ),
        children: [
          LiquidGlass(
            width: 300,
            height: 70,
            magnification: 1,
            distortion: 0.2,
            distortionWidth: 50,
            blur: LiquidGlassBlur(sigmaX: 1.75, sigmaY: 0.75),
                shape: RoundedRectangleShape(
                    //highDistortionOnCurves: true,
                    cornerRadius: 24,
                    borderWidth: 3,
                    borderSoftness: 5.5,
                    lightIntensity: 1.5,
                ),
            position: LiquidGlassAlignPosition(alignment: Alignment.center),
            
            child: Center(child: 
            SizedBox(
              width: 300,
              height: 70,
              child: FilledButton(onPressed: () {  },
              style: FilledButton.styleFrom(
                backgroundColor: Colors.transparent, 
                foregroundColor: Colors.white,
                overlayColor: Colors.yellow,
                surfaceTintColor: Colors.blue,
              ), 
              child: Text('Click me!', style: TextStyle(fontSize: 24,),)),
            )), 
          ),
        ],
      ),
    );
  }
}

性能

不幸的是，我用于测试 liquid_glass_easy 的项目有些老旧，Android 构建失败了。我懒得去修复它，反正这个项目只是用于教育用途。

但在 Windows 平台上，它对性能完全没有影响。（我已经对上面带有按钮的页面进行了性能分析）。

总结

我并不认为液态玻璃效果有多么重要。它不会让一个无用的 App 变得有用，它的缺失也不会让一个有用的 App 变得无用。所以，我个人不打算在我的项目中使用它。

但是，作为一个 Flutter 爱好者 ，我很高兴这个解决方案的存在，并且我确信其他解决方案 （可能更优秀的）也正在路上。我相信，很快在 Flutter 中创建液态玻璃组件将比在 SwiftUI 中更容易。