Flutter物体检测插件jtdetector的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter物体检测插件jtdetector的使用

jtdetector 是一个用于文本和文本字段检测的高度可定制的Flutter插件。它可以检测URL、哈希标签、电子邮件、用户标记以及任何其他模式。

特性

  • 文本字段检测小部件
  • 文本检测小部件
  • 文本检测方法
  • 多种正则表达式常量
  • 高度可定制的小部件

使用方法

要使用这个包，请在你的 pubspec.yaml 文件中添加 jtdetector 作为依赖项：

dependencies:
  jtdetector: ^latest_version

然后导入该包：

import 'package:jtdetector/jtdetector.dart';

简单使用示例

JTextFieldDetector 小部件

JTextFieldDetector(
  controller: TextEditingController(),
  keyboardType: TextInputType.multiline,
  style: const TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  ),
  isTapValid: false,
  textDirection: TextDirection.rtl,
  clipBehavior: Clip.hardEdge,
  detectorOptions: detectorOptionsList,
  maxLines: 15,
)

JTextDetector 小部件

JTextDetector(
  text: "This a url: https://jucodes.com email address: info@jucodes.com an #hashtag @user tag +967772445395",
  detectorOptions: [
    DetectorOptions(
      type: "PHONE",
      pattern: PHONE_REGEXP,
      style: const TextStyle(
        color: Colors.red,
        fontSize: 24,
      ),
      onTap: (val) {
        debugPrint("tel:${val.value}");
      },
    ),
    DetectorOptions(
      type: "Url",
      pattern: URL_REGEXP,
      style: const TextStyle(
        color: Colors.blue,
        fontSize: 24,
      ),
      onTap: (val) {
        debugPrint("website:${val.value}");
      },
    ),
    DetectorOptions(
      type: "Tag",
      pattern: r'''(?!\n)(?:^|\s)(#([·・ー_0-9０-９a-zA-Zａ-ｚＡ-Ｚ\u0600-\u06FF]+))''',
      style: const TextStyle(
        color: Colors.green,
        fontSize: 24,
      ),
      onTap: (val) {
        debugPrint("Tag:${val.value}");
      },
    ),
  ],
)

方法

List<DetectorOptions> defaultDetectorOptionsList = [
  DetectorOptions(type: URL_REGEXP_TYPE, pattern: URL_REGEXP),
  DetectorOptions(type: PHONE_REGEXP_TYPE, pattern: PHONE_REGEXP),
  DetectorOptions(type: EMAIL_REGEXP_TYPE, pattern: EMAIL_REGEXP),
  DetectorOptions(type: HASHTAG_REGEXP_TYPE, pattern: HASHTAG_REGEXP),
  DetectorOptions(type: USER_TAG_REGEXP_TYPE, pattern: USER_TAG_REGEXP),
  DetectorOptions(type: USER_ID_TAG_REGEXP_TYPE, pattern: USER_TAG_WITH_ID),
];

List<DetectedValue> values = detectFromText(
  "website https://jucodes.com/en web: www.jucodes.com, facebook.com, link http://jucodes.com/method?id=hello.com, hashtag #trending & mention @dev.user +12345678901",
  defaultDetectorOptionsList,
);

完整示例Demo

以下是一个完整的示例应用程序，展示了如何使用 JTextDetector 和 JTextFieldDetector：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JText Detector Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const JTextDetectorExample(),
    );
  }
}

const List<String> TEXT_EXAMPLE = [
  "السلام [@عليكم:12345678] #how @حالكم [@friends:1234568] 150",
  "00. This a url: https://jucodes.com email address: info@jucodes.com an #hashtag @user tag +967772445395",
  // 其他示例文本...
];

List<DetectorOptions> detectorOptionsList = [
  DetectorOptions(
    type: "PHONE",
    pattern: PHONE_REGEXP,
    style: const TextStyle(color: Colors.red, fontSize: 24),
    onTap: (url) {
      debugPrint("tel:${url.value}");
    },
  ),
  DetectorOptions(
    pattern: URL_REGEXP,
    type: URL_REGEXP_TYPE,
    style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.brown),
    onTap: (value) {
      debugPrint("${value.detectType}:${value.value}:${value.regExp.pattern}");
    },
  ),
  // 其他检测选项...
];

class JTextDetectorExample extends StatefulWidget {
  const JTextDetectorExample({Key? key}) : super(key: key);

  @override
  State<JTextDetectorExample> createState() => _JTextDetectorExampleState();
}

class _JTextDetectorExampleState extends State<JTextDetectorExample> {
  final TextEditingController controller = TextEditingController(text: '');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("JustTextDetectorWidget")),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                JTextFieldDetector(
                  controller: controller,
                  keyboardType: TextInputType.multiline,
                  style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black),
                  textDirection: TextDirection.rtl,
                  textAlign: TextAlign.right,
                  clipBehavior: Clip.hardEdge,
                  detectorOptions: detectorOptionsList,
                  isTapValid: false,
                  maxLines: 15,
                ),
                for (int i = 0; i < TEXT_EXAMPLE.length; i++)
                  JTextDetector(
                    text: TEXT_EXAMPLE[i],
                    selectable: TEXT_EXAMPLE[i].startsWith("07"),
                    detectorOptions: detectorOptionsList,
                  ),
              ],
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final value = detectFromText(TEXT_STRING, detectorOptionsList);
          for (var i in value) {
            debugPrint("${i.detectType}:${i.value}:${i.regExp.pattern}");
          }
        },
        child: const Icon(Icons.sync),
      ),
    );
  }
}

const String TEXT_STRING =
    "السلام [@عليكم:12345678] #how @حالكم [@friends:1234568] ..0"
    "00. This a url: https://flutter.dev email address: info@jucodes.com an #hashtag @user tag "
    "01. This a url: https://flutter.dev"
    "02. This email address example@app.com";

以上代码提供了一个完整的示例应用程序，演示了如何在Flutter应用中使用 jtdetector 插件进行文本检测。你可以根据需要进一步扩展和自定义这些示例。


更多关于Flutter物体检测插件jtdetector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter物体检测插件jtdetector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter物体检测插件jtdetector的使用，以下是一个简单的示例代码，展示如何在Flutter应用中使用该插件进行物体检测。请注意，实际使用时，你可能需要根据jtdetector的具体版本和API文档进行调整。

首先，确保你已经在pubspec.yaml文件中添加了jtdetector依赖：

dependencies:
  flutter:
    sdk: flutter
  jtdetector: ^最新版本号  # 替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤使用jtdetector进行物体检测：

  1. 导入插件：
import 'package:jtdetector/jtdetector.dart';
  1. 初始化插件：

在需要使用物体检测的地方，比如_MyAppState中，初始化JTDetector实例。

class _MyAppState extends State<MyApp> {
  late JTDetector _detector;

  @override
  void initState() {
    super.initState();
    // 初始化JTDetector实例，注意配置路径可能需要根据你的模型文件位置进行调整
    _detector = JTDetector(
      modelPath: 'assets/model/', // 模型文件所在的路径
      labelsPath: 'assets/labels.txt', // 标签文件路径
      numThreads: 2, // 使用的线程数
    );

    // 加载模型（异步操作）
    _loadModel();
  }

  Future<void> _loadModel() async {
    try {
      await _detector.loadModel();
      print('Model loaded successfully.');
    } catch (e) {
      print('Failed to load model: $e');
    }
  }

  @override
  void dispose() {
    // 释放资源
    _detector.close();
    super.dispose();
  }

  // ... 其他代码
}
  1. 进行物体检测：

你可以从图像或相机帧中获取数据，然后使用detectObjects方法进行物体检测。

// 假设你有一个Uint8List类型的图像数据imageBytes
Uint8List imageBytes = ...; // 从文件、相机或其他来源获取

Future<void> _detectObjectsFromImage(Uint8List imageBytes) async {
    try {
      List<DetectionResult> results = await _detector.detectObjects(imageBytes);
      // 处理检测结果
      results.forEach((result) {
        print('Detected object: ${result.label} at ${result.boundingBox}');
      });
    } catch (e) {
      print('Failed to detect objects: $e');
    }
  }
  1. 在UI中显示结果：

你可以将检测结果绘制在图像上，或使用其他方式在UI中显示。

// 假设你有一个Image.memory(imageBytes)来显示原始图像
// 你可以根据检测结果在图像上绘制边界框和标签

由于Flutter的UI绘制部分可能涉及较多的代码和细节，这里仅给出基本的检测逻辑。在实际应用中，你可能需要使用CustomPaint或其他方式将检测结果绘制在图像上。

注意：上述代码是一个简化的示例，实际使用时可能需要根据jtdetector的具体实现和你的项目需求进行调整。特别是模型加载和检测的部分，可能需要根据插件的API文档进行详细的配置和处理。同时，确保你的模型文件和标签文件已经正确放置在项目中，并且路径配置正确。

回到顶部