Flutter微小图片加载插件ak_tiny_image的使用
Flutter微小图片加载插件ak_tiny_image的使用
功能说明：
- 使用该工具包可以实现项目内指定目录下所有图片的压缩。
- 可以记录以前项目中旧图片不做压缩。
- 压缩后的图片会有压缩记录，下次压缩不会重复压缩。
- 支持webp、png、jpeg三种格式文件压缩。
使用方法：
1. 脚本配置:
// 在项目中实现类似AKTinyDoSave.dart、AKTinyDoComp.dart做如下配置
AKTinyImageManager.instance.init(
tinyImageApiKey: "x2zpZtVlK4MJjDm03P6b1h1DhGzGR4c4", // TinyImage的Apikey可到TinyImage申请
projectRootPath: '/Users/anker/tiny_image/ak_tiny_image',// 项目工程地址
imageDirPaths: {
'/Users/anker/tiny_image/ak_tiny_image/example/imageA' // 需要压缩图片的根目录
}
)2. 如何记录项目中以前旧的图片不做压缩：
// 执行以下命令：
// 1. 会计算图片的md5值并保存到项目中的".ak_tiny_image_uiq_id" 文件中
// 2. 当执行图片压缩时会计算图片的md5值是否已经在文件中，如果存在则说明图片不需要做压缩
// 3. 该脚本一般只在项目开始使用该工具前调用一次或者在新增加图片前使用一次
// 4. ".ak_tiny_image_uiq_id"需要提交到git以统一记录压缩过的图片
dart AKTinyDoSave.dart3. 如何执行图片压缩：
// 执行以下命令：
// 1. 会读取项目中的".ak_tiny_image_uiq_id" 文件中保存已经记录压缩过的图片md5值
// 2. 当执行图片压缩时会计算图片的md5值是否已经在文件中，如果存在则说明图片不需要做压缩
// 3. 将需要压缩的图片上传到tiny image进行压缩替换原来的图片
// 4. ".ak_tiny_image_uiq_id"需要提交到git以统一记录压缩过的图片
dart AKTinyDoComp.dart完整示例Demo
import 'package:ak_tiny_image/ak_tiny_image.dart';
void main() {
// 初始化插件
AKTinyImageManager.instance.init(
tinyImageApiKey: "x2zpZtVlK4MJjDm03P6b1h1DhGzGR4c4",
projectRootPath: '/Users/anker/tiny_image/ak_tiny_image',
imageDirPaths: {
'/Users/anker/tiny_image/ak_tiny_image/example/imageA'
}
);
// 记录未压缩的图片
// AKTinyImageManager.instance.lastuiqIdSave();
// 执行压缩操作
AKTinyImageManager.instance.execCompressed();
}
1 回复
更多关于Flutter微小图片加载插件ak_tiny_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
ak_tiny_image 是一个用于 Flutter 的微小图片加载插件，旨在优化图片加载性能，特别是在需要加载大量小图片的场景中。它可以帮助开发者更高效地管理和加载小图片，减少内存占用和加载时间。
安装 ak_tiny_image
首先，你需要在 pubspec.yaml 文件中添加 ak_tiny_image 插件的依赖：
dependencies:
flutter:
sdk: flutter
ak_tiny_image: ^1.0.0 # 请使用最新版本然后运行 flutter pub get 来安装依赖。
使用 ak_tiny_image
1. 基本用法
ak_tiny_image 提供了 TinyImage 组件来加载小图片。你可以像使用 Image 组件一样使用它。
import 'package:flutter/material.dart';
import 'package:ak_tiny_image/ak_tiny_image.dart';
class MyHomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tiny Image Example'),
),
body: Center(
child: TinyImage(
imageUrl: 'https://example.com/small_image.png',
width: 100,
height: 100,
fit: BoxFit.cover,
),
),
);
}
}2. 配置缓存
ak_tiny_image 提供了缓存机制，你可以配置缓存的策略和大小。
import 'package:flutter/material.dart';
import 'package:ak_tiny_image/ak_tiny_image.dart';
void main() {
TinyImageCacheConfig(
maxSize: 50, // 最大缓存数量
maxSizeBytes: 10 * 1024 * 1024, // 最大缓存大小（10MB）
);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Tiny Image Example',
home: MyHomePage(),
);
}
}3. 自定义加载器
你可以自定义图片加载器，例如使用 cached_network_image 来加载图片。
import 'package:flutter/material.dart';
import 'package:ak_tiny_image/ak_tiny_image.dart';
import 'package:cached_network_image/cached_network_image.dart';
class MyHomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tiny Image Example'),
),
body: Center(
child: TinyImage(
imageUrl: 'https://example.com/small_image.png',
width: 100,
height: 100,
fit: BoxFit.cover,
imageBuilder: (context, imageProvider) {
return CachedNetworkImage(
imageUrl: 'https://example.com/small_image.png',
width: 100,
height: 100,
fit: BoxFit.cover,
);
},
),
),
);
}
}