Flutter标签处理插件hashtagable的使用

Flutter标签处理插件hashtagable的使用

hashtagable 是一个用于实现带有标签装饰文本的 Flutter 插件。它可以检测以 # 开头的单词，类似于 Twitter 的标签功能。

功能展示

使用方法

作为TextField

你可以使用 HashTagTextField 来装饰输入的文本。

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

• decoratedStyle 是标签文本的样式。
• basicStyle 是普通文本的样式。
• 其他参数与 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(String) 回调会在用户点击标签时被调用。
• 你可以在回调中添加一些动作。

自定义函数

检查文本是否包含标签

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

提取文本中的标签

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

提示

• 如果你还想装饰 @ 符号，可以通过添加参数 decorateAtSign: true 来实现。

HashTagText(
  text: "#Hello World @flutter_developers",
  decoratedStyle: TextStyle(fontSize: 14, color: Colors.red),
  basicStyle: TextStyle(fontSize: 14, color: Colors.black),
  onTap: (text) {
    print(text);
  },
  decorateAtSign: true,
)

• 装饰规则类似于 Twitter。它不会装饰包含表情符号或符号的标签。标签前必须有空格才能被装饰。

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

如果你有任何请求或问题，请随时在 GitHub 上提出。

完整示例Demo

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        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\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);
                  },
                ),
                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,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}