Flutter图片标签解析插件image_tag的使用

Flutter 图片标签解析插件 image_tag 的使用

特性

• ImageTag
• TagContainer
• TagItem
• TagTooltipOptions

支持平台

• Flutter Android
• Flutter iOS
• Flutter Web
• Flutter Desktop

使用方法

添加插件到 pubspec.yaml

dependencies:
  image_tag: ^<最新版本>

导入插件

import 'package:image_tag/image_tag.dart';

ImageTag 组件

ImageTag(
  debug: true, // 是否开启调试模式
  image: _imageUrl, // 图片 URL
  tagItems: _items, // 标签列表
  current: _item, // 当前选中的标签
  options: _options, // 配置选项
  alignment: Alignment.center, // 对齐方式
  onTap: (TagItem item) => null, // 点击事件
  onLongTap: (TagItem item) => null, // 长按事件
  onDoubleTap: (TagItem item) => null, // 双击事件
  onTagUpdate: (List<TagItem> items, TagItem item) => null, // 标签更新事件
  onTagTap: (TagItem item) => null, // 标签点击事件
  onTagLongTap: (TagItem item) => null, // 标签长按事件
  customTap: (double x, double y, Offset position) => null, // 自定义点击事件
  customLongTap: (double x, double y, Offset position) => null, // 自定义长按事件
  customDoubleTap: (double x, double y, Offset position) => null, // 自定义双击事件
  customTagUpdate: (double x, double y, int itemIndex) => null, // 自定义标签更新事件
  customTagTap: (double x, double y, int itemIndex) => null, // 自定义标签点击事件
  customTagLongTap: (double x, double y, int itemIndex) => null, // 自定义标签长按事件
  onListener: (TagItem? item) => null, // 监听器
);

TagTooltipOptions 配置

TagTooltipOptions(
  tooltip: true, // 是否显示提示框
  width: _width, // 提示框宽度
  height: _height, // 提示框高度
  margin: 4.0, // 提示框边距
  radius: 8.0, // 提示框圆角半径
  color: _color, // 提示框背景颜色
  arrowSize: 8.0, // 提示框箭头大小
  duration: 100, // 动画持续时间
  child: null, // 子组件
  transitionBuilder: (Widget child, Animation<double> animation) =>
      ScaleTransition(scale: animation, child: child), // 过渡动画构建器
);

TagContainer 容器

TagContainer(
  height: 60.0, // 容器高度
  width: 100.0, // 容器宽度
  child: Container(color: Colors.black), // 容器子组件
);

TagItem 标签项

TagItem(
  x: _x, // X坐标
  y: _y, // Y坐标
  child: _child, // 标签子组件
  arguments: _data, // 标签数据
);

示例代码

import 'package:example/example/custom/example_custom_image_tag.dart';
import 'package:example/example/pageview/example_pageview_image_tag.dart';
import 'package:example/example/simple/example_simple_image_tag.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: ExampleImageTag(),
  ));
}

class ExampleImageTag extends StatelessWidget {
  const ExampleImageTag({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromRGBO(65, 65, 65, 1),
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(45, 45, 45, 1),
        title: const Text(
          "Image Tag",
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 24,
            color: Colors.amber,
          ),
        ),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 24),
          _button(
            context,
            "Simple",
            const ExampleSimpleImageTag(),
          ),
          _button(
            context,
            "PageView",
            const ExamplePageviewImageTag(),
          ),
          _button(
            context,
            "Custom",
            const ExampleCustomImageTag(),
          ),
        ],
      ),
    );
  }

  GestureDetector _button(
    BuildContext context,
    String title,
    Widget widget,
  ) =>
      GestureDetector(
        onTap: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => widget)),
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: 50,
          margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: const Color.fromRGBO(45, 45, 45, 1),
          ),
          padding: const EdgeInsets.only(left: 24),
          child: Align(
            alignment: Alignment.centerLeft,
            child: Text(
              title,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.amber,
                fontSize: 16,
              ),
            ),
          ),
        ),
      );
}