Flutter链接检测插件hash_at_links_detector的使用

Flutter链接检测插件hash_at_links_detector的使用

你可以使用CustomSmartText来检测# @链接文本。

CustomSmartText(
  text: 
  "@flutter test @hatem ragap #flutter #Dart \n https://pub.dev \n hi hello \n h hello \n s #菲特尔\n @哈特姆",
  atStyle: TextStyle(color: Colors.red), // 设置@标签样式
  disableAt: false, // 是否禁用@标签
  onTagClick: (tag) { // 点击标签时的回调
    if (tag == "Dart") {
      print("Dart is  $tag");
    } else {
      print("tag is  $tag");
    }
  },
  onUrlClicked: (open) { // 点击链接时的回调
    // 打开URL
    print("opened $open");
  },
  onAtClick: (at) { // 点击@标签时的回调
    print("at is  $at");
  },
),

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用hash_at_links_detector插件：

import 'package:flutter/material.dart';
import 'package:hash_at_links_detector/hash_at_links_detector.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 const MaterialApp(
      home: ExamplePage(), // 主页设置为ExamplePage
    );
  }
}

class ExamplePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hash At Links Detector 示例'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: CustomSmartText(
          text: 
          "@flutter test @hatem ragap #flutter #Dart \n https://pub.dev \n hi hello \n h hello \n s #菲特尔\n @哈特姆",
          atStyle: TextStyle(color: Colors.red), // 设置@标签样式
          disableAt: false, // 是否禁用@标签
          onTagClick: (tag) { // 点击标签时的回调
            if (tag == "Dart") {
              print("Dart is  $tag");
            } else {
              print("tag is  $tag");
            }
          },
          onUrlClicked: (open) { // 点击链接时的回调
            // 打开URL
            print("opened $open");
          },
          onAtClick: (at) { // 点击@标签时的回调
            print("at is  $at");
          },
        ),
      ),
    );
  }
}

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

1 回复

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


hash_at_links_detector 是一个 Flutter 插件，用于检测文本中的链接（如 # 标签和 @ 提及）并将其转换为可点击的链接。这个插件通常用于社交媒体应用或聊天应用中，以增强用户体验。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 hash_at_links_detector 插件：

dependencies:
  flutter:
    sdk: flutter
  hash_at_links_detector: ^1.0.0  # 请使用最新版本

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

使用插件

1. 导入插件

import 'package:hash_at_links_detector/hash_at_links_detector.dart';

2. 使用 HashAtLinksDetector 组件

你可以使用 HashAtLinksDetector 组件来包裹你的文本，它会自动检测 # 标签和 @ 提及，并将其转换为可点击的链接。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('HashAtLinksDetector Example'),
        ),
        body: Center(
          child: HashAtLinksDetector(
            text: 'Hello [@username](/user/username), check out this #cool tag!',
            onTap: (String link) {
              print('Link tapped: $link');
            },
          ),
        ),
      ),
    );
  }
}

3. 自定义样式

你可以通过 style 和 linkStyle 参数来自定义文本和链接的样式。

HashAtLinksDetector(
  text: 'Hello [@username](/user/username), check out this #cool tag!',
  style: TextStyle(fontSize: 16, color: Colors.black),
  linkStyle: TextStyle(fontSize: 16, color: Colors.blue),
  onTap: (String link) {
    print('Link tapped: $link');
  },
)

4. 处理链接点击事件

onTap 回调函数会在用户点击链接时触发，你可以在这里处理链接点击事件，比如导航到其他页面或显示一个对话框。

HashAtLinksDetector(
  text: 'Hello [@username](/user/username), check out this #cool tag!',
  onTap: (String link) {
    if (link.startsWith('@')) {
      print('Mention tapped: $link');
    } else if (link.startsWith('#')) {
      print('Hashtag tapped: $link');
    }
  },
)
回到顶部