Flutter文本链接处理插件flutter_linkable_text的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter文本链接处理插件flutter_linkable_text的使用

本README描述了该插件的使用方法。如果您将此插件发布到pub.dev,此README的内容将出现在您的插件页面上。

功能简介

flutter_linkable_text 插件用于将普通的Text小部件转换为RichText小部件。它会自动检测文本中的链接、电子邮件地址和电话号码,并将其颜色更改为蓝色,并添加点击手势。


使用方法

1. 添加依赖

pubspec.yaml文件中添加插件依赖:

dependencies:
  flutter_linkable_text: ^latest

然后运行以下命令以更新依赖项:

flutter pub get

2. 导入插件

在代码文件中导入插件:

import 'package:flutter_linkable_text/flutter_linkable_text.dart';

示例代码

以下是一个完整的示例代码,展示了如何使用flutter_linkable_text插件来处理文本中的链接、电话号码和电子邮件地址。

import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_linkable_text/flutter_linkable_text.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 主应用入口
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      builder: EasyLoading.init(), // 初始化加载指示器
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 20), // 设置内边距
        alignment: Alignment.center, // 居中对齐
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 垂直居中排列子组件
          children: <Widget>[
            // 显示提示文本
            const Text(
              'This text below has links, phone numbers and email addresses:',
            ),
            // 转换为富文本并处理链接、电话和邮箱
            FLTTextFunctions.convertToRichText(
              'Hello, we come from https://luckystars.com, with hotline 02241554111. You got an award from our marketing campain. So, please send your information to email award_here@fakemail.com.\nGoodbye.',
              onEmail: (email) {
                // 点击邮箱时触发回调
                EasyLoading.showToast(email); // 使用EasyLoading显示邮箱地址
              },
              onPhone: (phone) {
                // 点击电话号码时触发回调
                EasyLoading.showToast(phone); // 使用EasyLoading显示电话号码
              },
              onUrl: (url) {
                // 点击链接时触发回调
                EasyLoading.showToast(url); // 使用EasyLoading显示链接地址
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_linkable_text 是一个用于在 Flutter 应用中自动检测文本中的链接、电子邮件、电话号码等,并将其转换为可点击的链接的插件。它可以帮助你轻松地处理文本中的链接,并为其添加点击事件。

安装

首先,你需要在 pubspec.yaml 文件中添加 flutter_linkable_text 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_linkable_text: ^1.0.0

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

基本用法

flutter_linkable_text 提供了一个 LinkableText 小部件,你可以用它来显示带有可点击链接的文本。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Linkable Text Example'),
        ),
        body: Center(
          child: LinkableText(
            'Visit https://flutter.dev for more information. Contact us at support@example.com or call +1234567890.',
            style: TextStyle(fontSize: 16),
            linkStyle: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
            onLinkTap: (url) {
              print('Link tapped: $url');
            },
          ),
        ),
      ),
    );
  }
}

参数说明

  • text: 要显示的文本。
  • style: 文本的样式。
  • linkStyle: 链接的样式。
  • onLinkTap: 当链接被点击时的回调函数,参数为链接的 URL。
  • linkTypes: 指定要检测的链接类型,默认为 LinkType.url | LinkType.email | LinkType.phone

自定义链接类型

你可以通过 linkTypes 参数来指定要检测的链接类型。例如,如果你只想检测 URL 和电子邮件,可以这样做:

LinkableText(
  'Visit https://flutter.dev for more information. Contact us at support@example.com or call +1234567890.',
  linkTypes: LinkType.url | LinkType.email,
  onLinkTap: (url) {
    print('Link tapped: $url');
  },
)

支持的链接类型

  • LinkType.url: 检测 URL。
  • LinkType.email: 检测电子邮件地址。
  • LinkType.phone: 检测电话号码。

自定义链接处理

你可以通过 onLinkTap 回调函数来自定义链接的处理逻辑。例如,你可以使用 url_launcher 插件来打开链接:

import 'package:url_launcher/url_launcher.dart';

LinkableText(
  'Visit https://flutter.dev for more information.',
  onLinkTap: (url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  },
)
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!