Flutter asset_transformation 在鸿蒙上的使用指南

Flutter示例项目asset_transformation展示了资源自定义转换处理能力，包括图像灰度转换和SVG编译为vector_graphics格式。通过pubspec.yaml配置转换器后，可直接在代码中使用转换后的资源。项目还提供了创建自定义转换器的完整示例，并已适配鸿蒙平台，转换后的资源会自动打包到应用中。该方案为Flutter应用的资源管理提供了灵活高效的解决方案，开发者可轻松实现

l13406208235

446人浏览 · 2025-12-20 16:20:04

l13406208235 · 2025-12-20 16:20:04 发布

1. 插件介绍

asset_transformation是一个Flutter示例项目，展示了如何在构建过程中对资源进行自定义转换处理。该项目主要演示了两种资源转换场景：

图像灰度转换：将彩色图像自动转换为灰度图像
SVG资源编译：将SVG图像编译为vector_graphics包可用的高效渲染格式

这个项目不仅展示了如何使用资源转换器，还提供了创建自定义资源转换器的完整示例，帮助开发者理解Flutter资源系统的扩展能力。

在这里插入图片描述

2. 包的引入

在引用的项目中，pubspec.yaml中dependencies新增配置：

dependencies:
  asset_transformation:
    git:
      url: "https://atomgit.com/openharmony-tpc/flutter_packages.git"
      path: "packages/flutter_samples/asset_transformation"
  vector_graphics:
    ^1.1.11+1

dev_dependencies:
  vector_graphics_compiler:
    ^1.1.11+1
  grayscale_transformer:
    git:
      url: "https://atomgit.com/openharmony-tpc/flutter_packages.git"
      path: "packages/flutter_samples/asset_transformation/grayscale_transformer"

3. API 的调用

3.1 资源转换器配置

在pubspec.yaml中配置资源转换器：

flutter:
  uses-material-design: true
  assets:
    # 彩色图像转换为灰度图像
    - path: assets/colorful.jpg
      transformers:
        - package: grayscale_transformer
    # SVG图像编译为vector_graphics格式
    - path: assets/svg.svg
      transformers:
        - package: vector_graphics_compiler

3.2 图像资源使用

在Flutter代码中直接使用转换后的资源：

import 'package:flutter/material.dart';
import 'package:vector_graphics/vector_graphics.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(50),
        child: Column(
          children: [
            const Text(
              '这是一张在pubspec.yaml中声明的彩色图像，但在应用中显示为灰度。'\n'这是因为配置的转换器将图像处理为了灰度格式。',
            ),
            // 使用转换后的灰度图像
            Image.asset('assets/colorful.jpg'),
            const Divider(height: 75),
            const Text(
              '这是使用vector_graphics包渲染的SVG图像。'\n'通过转换器，SVG已被编译为高效渲染格式。',
            ),
            // 使用编译后的SVG图像
            const VectorGraphic(loader: AssetBytesLoader('assets/svg.svg')),
          ],
        ),
      ),
    );
  }
}

3.3 创建自定义资源转换器

参考grayscale_transformer包，创建自己的资源转换器：

import 'dart:io';
import 'package:args/args.dart';
import 'package:image/image.dart';

int main(List<String> arguments) {
  final parser = ArgParser()
    ..addOption('input', mandatory: true, abbr: 'i')
    ..addOption('output', mandatory: true, abbr: 'o');

  ArgResults argResults = parser.parse(arguments);
  final String inputFilePath = argResults['input'];
  final String outputFilePath = argResults['output'];

  try {
    // 读取输入图像
    final Image image = decodeImage(File(inputFilePath).readAsBytesSync())!;
    // 应用转换（此处为灰度转换）
    final Image transformedImage = grayscale(image);
    // 写入输出文件
    File(outputFilePath).writeAsBytesSync(encodeJpg(transformedImage));

    return 0;
  } catch (e) {
    stderr.writeln('转换失败: $e');
    return 1;
  }
}

在自定义转换器的pubspec.yaml中声明：

name: your_custom_transformer
description: 自定义资源转换器
version: 1.0.0

environment:
  sdk: ^3.6.2

dependencies:
  args: ^2.4.2
  # 其他依赖，如image处理库

# 声明为可执行程序
executables:
  your_custom_transformer: main

4. 鸿蒙平台适配说明

4.1 项目结构

asset_transformation项目已适配鸿蒙平台，核心适配文件包括：

ohos/AppScope/app.json5：应用配置
ohos/entry/src/main/ets/entryability/EntryAbility.ets：入口能力实现
ohos/entry/src/main/module.json5：模块配置

4.2 入口能力实现

import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos';
import { GeneratedPluginRegistrant } from '../plugins/GeneratedPluginRegistrant';

export default class EntryAbility extends FlutterAbility {
  configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    GeneratedPluginRegistrant.registerWith(flutterEngine)
  }
}