Flutter 小技巧之：实现 iOS 26 的 “液态玻璃”

主要观点总结

本文主要介绍了iOS 26系统中的液态玻璃效果的技术实现细节，包括bug、设计风格和着色器的使用等。

关键观点总结

关键观点1: 液态玻璃效果成为iOS 26的热度标签。

设计风格大变和beta1版本的bug带来了毛坯感，使得液态玻璃效果冲上热搜。

关键观点2: 液态玻璃效果的实现不仅仅是模糊图层。

通过自定义着色器实现，涉及到模糊半径的计算、方向采样的循环、质量参数的设置等。

关键观点3: 着色器的关键部分是边缘液体感的处理。

通过创建扭曲的新坐标uv2，结合位移贴图icon.y和smoothstep函数，实现视觉上的折射效果。

关键观点4: 实际实现中还有其他调整和优化的可能性。

比如调整扭曲效果的范围和强度，以及根据实际需求调整液态放大的效果。

关键观点5: 该效果实现具有挑战性。

在其他平台或框架上实现类似效果的难度较大，涉及能耗控制和渲染成本控制的问题。

免责声明