Flutter文本高亮插件highlight_service的使用

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

Flutter文本高亮插件highlight_service的使用

Getting Started（开始使用）

本项目是一个用于Flutter的插件项目，该插件包含Android和/或iOS平台特定的实现代码。

对于Flutter开发的帮助信息，请参阅在线文档，其中包含了教程、示例、移动开发指南以及完整的API参考。

示例代码

import 'package:flutter/material.dart';
import 'package:highlight_sevice/link_sevvice.dart'; // 导入highlight_service插件
import 'dart:async';

import 'package:url_launcher/url_launcher.dart'; // 用于处理URL链接

void main() => runApp(const LinkServiceExample()); // 主函数，运行应用

class LinkServiceExample extends StatelessWidget { // 定义一个无状态小部件
  const LinkServiceExample({super.key}); // 构造函数
  
  [@override](/user/override)
  Widget build(BuildContext context) { // 构建方法
    return MaterialApp( // 创建MaterialApp实例
      debugShowCheckedModeBanner: false, // 去掉调试横幅
      title: 'Highlight Link example', // 应用标题
      home: Scaffold( // 创建Scaffold实例
        appBar: AppBar( // 创建AppBar实例
          title: const Text('Highlight Link example'), // 设置AppBar标题
        ),
        body: SingleChildScrollView( // 创建单ChildScrollView实例
          child: Column( // 创建Column实例
            mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 主轴对齐方式
            children: [ // 列表项
              Center( // 创建Center实例
                child: Column( // 创建Column实例
                  children: [
                    LinkService( // 使用LinkService插件
                      onOpen: _onOpen, // 定义打开链接时的回调函数
                      options: const LinkOptions( // 设置选项
                        showEmail: false, // 不显示电子邮件
                        showHashTag: false, // 不显示话题标签
                        showPhoneNumber: false, // 不显示电话号码
                        showUserTag: false, // 不显示用户标签
                      ),
                      text: "Today is #Happy ^^ #U\nContac via @HưngNguyễn     - Mobile: +84963907817     facebook.com abc.ai ahhygyt.fgt\nMade by https://www.facebook.com/hungnguyen280492/\n\nMail: hungnguyen.it36@gmail.com facebook.com abc.ai hungnguyen.it36 http:/hungnguyen.it httpbin.org/anything?json https://httpbin.org/anything?json", // 需要高亮的文本
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> _onOpen(LinkableElement link) async { // 打开链接时的回调函数
    if(link.isTag) { // 如果是标签
      debugPrint(link.url); // 打印标签URL
    } else { // 否则
      if (await canLaunchUrl(Uri.parse(link.url))) { // 检查是否可以打开URL
        if (!await launchUrl(Uri.parse(link.url))) { // 尝试打开URL
          throw Exception('Could not launch ${link.url}'); // 如果失败，则抛出异常
        }
      }
    }
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用highlight_service插件来实现文本高亮的示例代码。highlight_service插件允许你根据正则表达式或其他条件高亮显示文本中的特定部分。

首先，确保你已经在pubspec.yaml文件中添加了highlight_service依赖：

dependencies:
  flutter:
    sdk: flutter
  highlight_service: ^0.1.0  # 请检查最新版本号并更新

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

接下来，是一个简单的Flutter应用示例，演示如何使用highlight_service来高亮显示文本：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Highlight Text Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String textToHighlight = "This is a simple Flutter text highlighting example.";
  final RegExp highlightPattern = RegExp(r'\bexample\b', caseSensitive: false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Highlight Demo'),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: HighlightText(
              text: textToHighlight,
              pattern: highlightPattern,
              textStyle: TextStyle(color: Colors.black),
              highlightTextStyle: TextStyle(color: Colors.red, backgroundColor: Colors.yellow.withOpacity(0.5)),
            ),
          ),
        ),
      ),
    );
  }
}

class HighlightText extends StatelessWidget {
  final String text;
  final RegExp pattern;
  final TextStyle textStyle;
  final TextStyle highlightTextStyle;

  HighlightText({
    required this.text,
    required this.pattern,
    required this.textStyle,
    required this.highlightTextStyle,
  });

  @override
  Widget build(BuildContext context) {
    List<TextSpan> spans = [];
    int start = 0;
    RegExpMatch? match;

    while ((match = pattern.matchAsPrefix(text, start)) != null) {
      if (match.start != start) {
        spans.add(TextSpan(text: text.substring(start, match.start), style: textStyle));
      }
      spans.add(TextSpan(text: match.group(0)!, style: highlightTextStyle));
      start = match.end;
    }

    if (start < text.length) {
      spans.add(TextSpan(text: text.substring(start), style: textStyle));
    }

    return RichText(
      text: TextSpan(children: spans),
    );
  }
}

在这个示例中，我们创建了一个HighlightText自定义Widget，它接受要显示的文本、用于匹配高亮的正则表达式以及普通文本和高亮文本的样式。这个Widget通过遍历文本并匹配正则表达式来创建一系列的TextSpan，然后将这些TextSpan添加到RichText中。

注意：highlight_service插件本身可能提供了一些便捷功能，但上述示例中我们手动实现了高亮逻辑，这是理解其工作原理的一种好方法。如果highlight_service提供了更高级的API，请参考其官方文档以获取更多信息。

回到顶部