Flutter图像优化插件nine_patcher的使用

Nine Patcher

Nine Patcher 是一个命令行工具，用于创建九宫格图像的 JSON 元数据文件，适用于此 Flutter 包。

工作流程

1. 创建高分辨率的九宫格图像，并添加适当的九宫格边框。
2. 运行以下命令：

dart run nine_patcher path/to/image.9.png output/dir 

这将处理 image.9.png 文件，并在 output/dir 目录下生成两个文件：

1. image.png：不带九宫格边框的普通图像。
2. image.9.json：九宫格边框的元数据文件，格式为 JSON。

如果文件路径为 path/to/Nx/image.9.png（例如 4x），则 Nx 被视为缩放比例，并被添加到元数据中以帮助渲染独立于分辨率的资源。

示例

dart run nine_patcher examples/4.0x/box_orange_rounded.9.png

示例代码

创建九宫格图像

首先，我们需要一个九宫格图像。可以使用绘图软件（如 Adobe Photoshop 或 GIMP）来创建。以下是创建九宫格图像的步骤：

1. 打开绘图软件并创建一个新文件。
2. 在文件的四个边缘添加标记，这些标记定义了图像的可拉伸区域和内容区域。
3. 保存图像为 .9.png 格式。

使用 nine_patcher 命令行工具

假设我们已经有一个名为 box_orange_rounded.9.png 的九宫格图像，并且它位于 examples/4.0x/ 目录下。我们可以运行以下命令：

dart run nine_patcher examples/4.0x/box_orange_rounded.9.png

该命令将生成两个文件：

• box_orange_rounded.png：不带九宫格边框的普通图像。
• box_orange_rounded.9.json：九宫格边框的元数据文件。

在 Flutter 项目中使用

1. 将生成的 box_orange_rounded.png 和 box_orange_rounded.9.json 文件复制到 Flutter 项目的 assets 目录中。
2. 在 pubspec.yaml 文件中声明这些资源文件：

flutter:
  assets:
    - assets/box_orange_rounded.png
    - assets/box_orange_rounded.9.json

1. 在 Flutter 代码中加载并使用这些资源文件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Nine Patch Example')),
        body: Center(
          child: NinePatchImage(
            assetName: 'assets/box_orange_rounded',
            width: 200,
            height: 100,
          ),
        ),
      ),
    );
  }
}