Flutter标签云插件tagtly的使用

Tagtly for hyberlink

Flutter 包允许在 Android 和 iOS 平台上显示各种超链接，例如在输入字段或文章视图中。

该包帮助检测以下内容：

• 邮件地址。
• URL。
• 社交媒体账户标签 [Facebook, Twitter, Instagram]。
• 以 # 开头的单词 [Hashtag]。
• 日期和时间。

未来我们将添加更多功能。

使用方法

作为文本字段

您可以使用 TagtlyTextField 来装饰所有超链接。

TagtlyTextField(
  decoration: const InputDecoration(
      hintText: 'Type anything',
      contentPadding: EdgeInsets.symmetric(horizontal: 8)),
  onChanged: (String value) {
    // 在这里处理文本变化
  },
)

您可以在 TagtlyTextField 中添加自己的样式，就像在 TextFormField 中一样。

只读文本

如果您希望显示文本而不进行修改，则可以使用 TagtlyTextView。

TagtlyTextView(
  "Text here #welcome mnhaloka@gmail.com",
  onClick: (TextObj textObj) => log(textObj.type.toString()),
)

参数 onClick(TextObj) 在用户点击超文本时被调用。它将返回包含 textContent 和 textType 的 TextObj。您可以在回调中添加对所点击文本的操作。

TagtlyTextView 和 TagtlyTextField

该包基于正则表达式构建。

如何在 TagtlyTextField() 中使用

如何在 TagtlyTextView() 中显示文本

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

完整示例代码

import 'dart:developer';

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tagtly Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const TagtlyApp(),
    );
  }
}

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

  [@override](/user/override)
  State<TagtlyApp> createState() => _TagtlyAppState();
}

class _TagtlyAppState extends State<TagtlyApp> {
  String text = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tagtly Demo'),
      ),
      body: Column(
        children: [
          Expanded(
            child: TagtlyTextField(
              decoration: const InputDecoration(
                  hintText: 'Type anything',
                  contentPadding: EdgeInsets.symmetric(horizontal: 8)),
              onChanged: (String value) {
                text = value;
                setState(() {});
              },
            ),
          ),
          const Text(
            'Output:',
            style: TextStyle(fontWeight: FontWeight.w700, fontSize: 22),
          ),
          Expanded(
              child: TagtlyTextView(
            text,
            onClick: (TextObj value) => log(value.type.toString()),
          ))
        ],
      ),
    );
  }
}