关于flutter:flutter-采用-BlurHash-算法实现图像缩略图

74次阅读

共计 4007 个字符，预计需要花费 11 分钟才能阅读完成。

原文

https://medium.com/flutterdev…

代码

https://github.com/ducafecat/…

参考

  • https://pub.dev/packages/flut…
  • https://blurha.sh/
  • https://github.com/woltapp/bl…

注释

依据联想速度的不同，从网络中叠加一张图片可能须要几分钟工夫。在获取图片时，齐全能够预期它会显示一个占位符。有一些显示占位符的策略。例如，您能够显示一个黑白框。在任何状况下，如果占位符能够像实在的图片一样，那就更令人欢快了。因而，你能够应用 BlurHash。

在这个博客中，咱们将摸索 Flutter 图片占位符。咱们将看到如何实现 blur hash 的演示程序，以及如何应用 BlurHash 作为图像占位符，在您的 flutter 应用程序中应用 flutter_blurhash 包。

https://pub.dev/packages/flut…

简介

BlurHash 是图片占位符的激进形容。它的工作原理是从图片生成一个散列字符串。生成的散列字符串将用于传递占位符。本文介绍了在 Flutter 应用程序中解析要作为图片占位符交付的 BlurHash 字符串的最佳办法。

演示

这个演示视频展现了如何在 Flutter 中应用 blurhash。它展现了 blurhash 如何在您的 Flutter 应用程序中应用 flutter_blurhash 包工作。它显示了图像占位符的紧凑示意模式。它会显示在你的设施上。

构造函数

这里有 BlurHash 的构造函数:

const BlurHash({
  required this.hash,
  Key? key,
  this.color = Colors.blueGrey,
  this.imageFit = BoxFit.fill,
  this.decodingWidth = _DEFAULT_SIZE,
  this.decodingHeight = _DEFAULT_SIZE,
  this.image,
  this.onDecoded,
  this.onReady,
  this.onStarted,
  this.duration = const Duration(milliseconds: 1000),
  this.curve = Curves.easeOut,
})

构造函数冀望您传递一个边界散列，它是利用 BlurHash 算法失去的散列字符串。万一你当初没有散列字符串，你能够利用他们的权威站点 blurha。Sh 来创立您须要利用的图片的散列字符串。

参数

BlurHash 的一些参数是:

  • hash: 须要此参数。要解码的散列
  • onDecoded: 此参数用于在对哈希进行解码时回调
  • image: 此参数用于近程下载资源
  • imageFit: 此参数用于如何适应解码和下载的图像
  • color: 此参数用于在解码前显示背景色彩
  • duration: 此参数用于动画持续时间。默认值为 const Duration(milliseconds: 1000).
  • curve: 此参数用于动画曲线。默认为 Curves.easeOut.
  • onStarted: 此参数用于在下载开始时调用的回调
  • onReady: 此参数用于在下载映像时回调

施行

  • 第一步: 增加依赖项

将依赖项增加到 pubspec ー yaml 文件。

flutter_blurhash: ^0.6.0
  • 第二步: 导入 
import 'package:flutter_blurhash/flutter_blurhash.dart';
  • 第三步: 在应用程序的根目录中运行 flutter 软件包。
$ flutter packages get

如何实现 dart 文件中的代码

你须要别离在你的代码中实现它:

在 lib 文件夹中创立一个名为 main.dart 的新 dart 文件。

上面是一个只传递散列参数的模型。因为没有传递 Image 参数，它将显示占位符直到工夫完结。

BlurHash(hash: 'LHA-Vc_4s9ad4oMwt8t7RhXTNGRj',),

当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

在主体中，咱们将增加 BlurHash() 办法。在此办法中，咱们将增加 imageFit，这意味着您能够通过将 BoxFit 枚举作为 imageFit 参数传递给构造函数来设置如何将图像适配到可拜访空间。如果没有传递参数，值默认为 BoxFit.fill。imageFit 竞争的应用相似于 FittedBox 的适合属性。目前，咱们将减少持续时间意味着图片已无效下载后，图片将沉闷一个给定的期限之前齐全显示。持续时间能够通过传递持续时间尊重作为持续时间争用来设置。如果没有传递参数，默认值是 1 秒 

BlurHash(
  imageFit: BoxFit.fitWidth,
  duration: const Duration(seconds: 4),
  curve: Curves.bounceInOut,
  hash: 'LHA-Vc_4s9ad4oMwt8t7RhXTNGRj',
  image: 'https://images.unsplash.com/photo-1486072889922-9aea1fc0a34d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bW91dGFpbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
),

当初，咱们将设置曲线意味着动画曲线能够通过设置曲线参数。默认值是 Curves.easeOut。最初，咱们将增加 image 示意图像参数传递的地位，图像的近程 URL 作为值。当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

当初，咱们将设置曲线意味着动画曲线能够通过曲线参数设置。默认值是 Curves.easeOut。最初，咱们将增加一个图像，这意味着图像参数是以图片的远端 URL 作为值传递的。当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

残缺代码 

import 'package:flutter/material.dart';
import 'package:flutter_blur_hash_demo/splash_screen.dart';
import 'package:flutter_blurhash/flutter_blurhash.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Splash(),);
  }
}

class BlurHashDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) =>
         Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.teal,
            automaticallyImplyLeading: false,
              title: Text("Flutter BlurHash Demo")
          ),
          body: Center(
            child: BlurHash(
              imageFit: BoxFit.fitWidth,
              duration: const Duration(seconds: 4),
              curve: Curves.bounceInOut,
              hash: 'LHA-Vc_4s9ad4oMwt8t7RhXTNGRj',
              image: 'https://images.unsplash.com/photo-1486072889922-9aea1fc0a34d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bW91dGFpbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
            ),
          ),
      );
}

结语

在这篇文章中，我简略地解释了 BlurHash 图像占位符的根本构造; 您能够依据本人的抉择批改这段代码。这是一个小的介绍 BlurHash 图片占位符用户交互从我这边，它的工作应用 Flutter。

© 猫哥

  • https://ducafecat.tech/
  • https://github.com/ducafecat
  • 微信群 ducafecat
  • b 站 https://space.bilibili.com/40…

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

正文完
flutter
发表至： flutter
2021-08-19
 0
关于flutter:flutter系列之在flutter中使用相机拍摄照片
关于flutter:dart系列之dart语言中的内置类型
关于flutter:flutter起步时遇到的坑
关于flutter:Flutter-读取应用资源并显示