# 还在用灰秃秃的图片占位符？快来试试这款神器

还在用灰秃秃的图片占位符？快来试试这款神器

每次你加载设计师精心设计的界面，结果因为图片都没加载出来，满屏都是灰秃秃的占位图，这是不是让设计师很抓狂？当你想往数据里塞小缩略图当占位图来解决这个问题时，数据库工程师是不是也会很头疼？那还不快来试试flutter_blurhash！

工作原理

BlurHash 是一种紧凑的表示形式，可将图像转换为简短的字符串，借助这些字符串能快速生成图像的模糊占位图，这样在高分辨率图像加载期间，用户就能看到一个模糊的预览图像，进而提升用户体验。 BlurHash的字符串长度通常在20-30个，既可以在JSON中使用也可以存放到数据库，所以可以随着API一起返回。

这个字符串长度取决你设置的比例

BlurHash生成

获取图片的 BlurHash 的一种快速简便的方法是将其上传到blursha.sh。

当然也可以使用官方开源代码实现，也有第三方代码实现，支持c、Swift、python等语言具体可以看blurhash。

使用及实际效果

flutter_blurhas目前只有解码功能，并不支持对图片编码。

dart 复制代码

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("BlurHash")),
        body: const SizedBox.expand(
          child: Center(
            child: AspectRatio(
              aspectRatio: 1.7,
              child: BlurHash(hash: "LNF5L5^*F@Nt}^-oOtR*EVS8V[ac"),
            ),
          ),
        ),
      ),
    );
  }
}

实际运行效果

原图

优化模式

BlurHashOptimizationMode.none：原始算法，用于向后兼容。
BlurHashOptimizationMode.standard：优化后的解码模式，具有更好的缓存局部性和性能。
BlurHashOptimizationMode.approximation：最快模式，使用近似的sRGB转换，结果略暗但性能显著提升。

dart 复制代码

class BlurHashApp extends StatelessWidget {
  const BlurHashApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("BlurHash")),
      body: const SizedBox.expand(
        child: Center(
          child: AspectRatio(
            aspectRatio: 1.6,
            child: BlurHash(
              hash: "LNF5L5^*F@Nt}^-oOtR*EVS8V[ac",
              optimizationMode: BlurHashOptimizationMode.approximation,
            ),
          ),
        ),
      ),
    ),
  );
}

结束语

顺便提一下，欢迎关注我的微信公众号OpenFlutter。