Flutter标签处理插件hashtager的使用

Flutter标签处理插件hashtager的使用

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

使用方法

作为 TextField

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

HashTagTextField(
  decoratedStyle: TextStyle(fontSize: 14, color: Colors.blue),
  basicStyle: TextStyle(fontSize: 14, color: Colors.black),
)
  • decoratedStyle 是标签文本的样式。
  • basicStyle 是未标记文本的样式。

其他参数与 TextField 相同。

作为只读文本

如果你只想装饰文本以供显示，可以使用 HashTagText。

HashTagText(
  text: "#Welcome to #hashtager \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"]

提示

  • DetectableTextField 是该插件的一个改进版本。hashtager 强制你使用标签，但这个插件允许你检测任何你想要的内容。
  • 如果你也想装饰 @ 符号，可以通过添加参数 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,
)
  • 装饰规则几乎与 Instagram 相同。
  • 支持所有语言。

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

完整示例代码

import 'package:flutter/material.dart';
import 'package:hashtager/hashtager.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>[
                /// 带标签的文本，仅用于显示
                HashTagText(
                  text: "#Welcome @to #hashtager\n This is #ReadOnlyText",
                  basicStyle: TextStyle(fontSize: 22, color: Colors.black),
                  decoratedStyle: TextStyle(fontSize: 22, color: Colors.red),
                  textAlign: TextAlign.center,
                  decorateAtSign: true,
                  onTap: (text) {
                    print(text);
                  },
                ),
                HashTagTextField(
                  basicStyle: TextStyle(fontSize: 15, color: Colors.black),
                  decoratedStyle: TextStyle(fontSize: 15, color: Colors.blue),
                  keyboardType: TextInputType.multiline,
                  decorateAtSign: true,
                  /// 当检测到以 `#` 或 `#` 和 `@` 开头的单词时被调用
                  onDetectionTyped: (text) {
                    print(text);
                  },
                  /// 当检测完成时被调用
                  onDetectionFinished: () {
                    print("detection finished");
                  },
                  maxLines: null,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter标签处理插件hashtager的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter标签处理插件hashtager的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


hashtager 是一个用于处理 Flutter 应用中标签（hashtags）的插件。它可以帮助你从文本中提取标签，并为这些标签添加样式或处理点击事件。以下是如何使用 hashtager 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 hashtager 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  hashtager: ^0.0.1  # 请检查最新版本

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

2. 导入插件

在你的 Dart 文件中导入 hashtager 插件：

import 'package:hashtager/hashtager.dart';

3. 使用 Hashtager 组件

Hashtager 组件可以用于显示带有标签的文本，并为标签添加样式。

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hashtager Example'),
        ),
        body: Center(
          child: Hashtager(
            text: 'This is a #Flutter example with #Hashtags.',
            hashtagStyle: TextStyle(
              color: Colors.blue,
              fontWeight: FontWeight.bold,
            ),
            onHashtagPressed: (String hashtag) {
              print('Pressed hashtag: $hashtag');
            },
          ),
        ),
      ),
    );
  }
}

4. 自定义样式和事件处理

你可以通过 hashtagStyle 参数来自定义标签的样式。onHashtagPressed 参数允许你处理标签的点击事件。

5. 提取标签

如果你只想从文本中提取标签，可以使用 extractHashtags 方法：

List<String> hashtags = Hashtager.extractHashtags('This is a #Flutter example with #Hashtags.');
print(hashtags); // 输出: ['Flutter', 'Hashtags']

6. 完整示例

以下是一个完整的示例，展示了如何使用 hashtager 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hashtager Example'),
        ),
        body: Center(
          child: Hashtager(
            text: 'This is a #Flutter example with #Hashtags.',
            hashtagStyle: TextStyle(
              color: Colors.blue,
              fontWeight: FontWeight.bold,
            ),
            onHashtagPressed: (String hashtag) {
              print('Pressed hashtag: $hashtag');
            },
          ),
        ),
      ),
    );
  }
}
回到顶部