Flutter标签处理插件hashtagable_v3的使用

Flutter 插件 hashtagable_v3 提供了用于实现带有标签（如 Twitter 风格）装饰文本的部件和函数。它能够识别以 # 开头的单词，并且提供了两种主要用法：作为可编辑的输入框（HashTagTextField）和只读显示文本（HashTagText）。此外，还提供了一些有用的辅助函数来检测、提取文本中的标签。

安装与配置

在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  hashtagable: ^latest_version # 请替换为最新版本号

然后运行 flutter pub get 来安装插件。

使用方法

作为TextField使用

HashTagTextField 可以用来装饰用户输入的文本。通过设置 decoratedStyle 和 basicStyle 分别定义标签文本和其他文本的样式。

HashTagTextField(
  decoratedStyle: TextStyle(fontSize: 14, color: Colors.blue),
  basicStyle: TextStyle(fontSize: 14, color: Colors.black),
)

其他参数基本上与 Material 的 TextField 相同。

作为ReadOnlyText使用

如果只是想展示带有标签效果的文字，可以使用 HashTagText。

HashTagText(
  text: "#Welcome to #hashtagable \n This is #ReadOnlyText",
  decoratedStyle: TextStyle(fontSize: 22, color: Colors.red),
  basicStyle: TextStyle(fontSize: 22, color: Colors.black),
  onTap: (text) {
    print(text); // 当点击标签时触发回调
  },
)

这里可以通过 onTap 回调监听用户的点击事件，并对选中的标签执行相应的操作。

自定义功能

• 检查文本是否包含标签：使用 hasHashtags(String) 函数。

  print(hasHashtags("Hello #World")); // true
  

• 从文本中提取所有标签：使用 extractHashTags(String) 函数。

  final List<String> hashTags = extractHashTags("#Hello World #Flutter Dart #Thank you");
  // ["#Hello", "#Flutter", "#Thank"]
  

其他提示

• 如果还需要支持 @ 符号的标记，可以在 HashTagText 或 HashTagTextField 中添加 decorateAtSign: true 参数。

• 标签的装饰规则遵循 Twitter 的标准，不会装饰含有表情符号或特殊字符的标签，并且需要在 # 或 @ 前有一个空格才能生效。

• 支持的语言包括英语、日语、韩语、西班牙语、阿拉伯语、泰语、挪威语和德语。

示例代码

下面是一个完整的示例应用，展示了如何同时使用 HashTagText 和 HashTagTextField。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hashtagable Demo')),
        body: Padding(
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                /// Tagged text only to be shown
                HashTagText(
                  text: "#Welcome to #hashtagable_v3\n This is #ReadOnlyText",
                  basicStyle: TextStyle(fontSize: 22, color: Colors.black),
                  decoratedStyle: TextStyle(fontSize: 22, color: Colors.red),
                  textAlign: TextAlign.center,
                  onTap: (text) {
                    print(text);
                  },
                ),
                SizedBox(height: 20),
                HashTagTextField(
                  basicStyle: TextStyle(fontSize: 15, color: Colors.black),
                  decoratedStyle: TextStyle(fontSize: 15, color: Colors.blue),
                  keyboardType: TextInputType.multiline,

                  /// Called when detection (word starts with #, or # and @) is being typed
                  onDetectionTyped: (text) {
                    print(text);
                  },

                  /// Called when detection is fully typed
                  onDetectionFinished: () {
                    print("detection finished");
                  },
                  maxLines: null,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这个例子创建了一个简单的界面，其中包含了两个部分：一个是只读的带标签文本区域，另一个是可以输入并实时显示标签效果的文本框。