Flutter九宫格图片处理插件nine_image_tools的使用

Flutter九宫格图片处理插件nine_image_tools的使用

在Flutter中并不能直接使用 .9.png；这里通过 ImageProvider 获取到图片的所有像素点的坐标系，并且判断出每个边界一个像素的黑色区域边界坐标轴，这样我们就知道了9图的填充区域和拉升区域。

  1. 拉伸区域只能使用 centerSlice 这个属性来使图片进行拉伸大小。我们根据属性填充我们需要拉伸的区域填充进去即可 <code>Rect.fromLTRB(this.left, this.top, this.right, this.bottom)</code>。
  2. 填充区域，拉伸区域有了之后需要再处理填充区域，这里使用的 Container 中 padding 属性来填充四个边，使得我们内容展示区域就是我们想要的区域，<code>EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom)</code>。
  3. 我们在裁切9图边缘区域，去掉黑色像素即获得了我们想要干净可拉伸区域。

使用方式如下:

NineImage(
  // imageProvider 图像处理
  imageProvider: AssetImage("images/private_bubble_baron.9.png"),
  // 内容填充区域
  child: Text(
    "sadasdasdasdas",
    style: TextStyle(color: Colors.white),
  ),
)

完整示例Demo

以下是一个完整的示例代码，展示了如何使用 NineImage 插件来处理九宫格图片。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('九宫格图片处理'),
        ),
        body: Center(
          child: NineImage(
            // imageProvider 图像处理
            imageProvider: AssetImage("images/private_bubble_baron.9.png"),
            // 内容填充区域
            child: Text(
              "sadasdasdasdas",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter九宫格图片处理插件nine_image_tools的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter九宫格图片处理插件nine_image_tools的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


nine_image_tools 是一个用于处理九宫格图片的 Flutter 插件，它可以帮助开发者轻松地将图片分割成九宫格，并在 Flutter 应用中显示。以下是 nine_image_tools 的基本使用步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 nine_image_tools 依赖：

dependencies:
  flutter:
    sdk: flutter
  nine_image_tools: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 nine_image_tools：

import 'package:nine_image_tools/nine_image_tools.dart';

3. 使用九宫格图片

nine_image_tools 提供了 NineImage 组件来显示九宫格图片。你可以通过以下方式使用它：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nine Image Tools Example'),
      ),
      body: Center(
        child: NineImage(
          image: AssetImage('assets/images/your_image.png'),
          // 设置九宫格的分割区域
          centerSlice: Rect.fromLTRB(30, 30, 70, 70),
          width: 200, // 图片宽度
          height: 200, // 图片高度
        ),
      ),
    );
  }
}

4. 参数说明

  • image: 需要显示的图片，可以是 AssetImage、NetworkImage 或 FileImage。
  • centerSlice: 定义图片的九宫格分割区域。Rect.fromLTRB(left, top, right, bottom) 用于指定分割区域。
  • width 和 height: 图片的宽度和高度。

5. 自定义九宫格

你可以通过调整 centerSlice 参数来自定义九宫格的分割区域。Rect.fromLTRB(left, top, right, bottom) 定义了图片的可拉伸区域和固定区域。

6. 示例

以下是一个完整的示例，展示如何使用 nine_image_tools 显示九宫格图片：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Nine Image Tools Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nine Image Tools Example'),
      ),
      body: Center(
        child: NineImage(
          image: AssetImage('assets/images/your_image.png'),
          centerSlice: Rect.fromLTRB(30, 30, 70, 70),
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}
回到顶部