Flutter文本智能操作插件smart_actions_text的使用

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

Flutter文本智能操作插件smart_actions_text的使用

🚀 Smart Actions Text

Flutter的一个包，可以将纯文本转换为交互元素，通过自动检测和样式化模式如URLs、电子邮件、电话号码和社交媒体句柄。

✨ 通过点击交互、复制功能、分享选项和直接访问社交媒体个人资料，使你的文本内容更具吸引力——所有这些都具有可定制的样式和行为！

🌟 特性

  • 🔍 自动检测：
    • 📧 电子邮件地址
    • 📞 电话号码
    • 🌐 URLs
    • 🤳 社交媒体用户句柄
  • ✨ 可定制样式 用于匹配的模式
  • 📱 交互功能：
    • 📋 复制到剪贴板
    • 🔗 分享文本
    • 🧑‍💻 打开社交媒体个人资料
  • 🎨 自定义图标支持
  • 📐 灵活的文本定位
  • 🔧 可配置的正则表达式模式

📥 安装

在你的pubspec.yaml文件中添加以下内容：

dependencies:
  smart_actions_text: ^0.0.1

然后运行：

flutter pub get

💻 使用

📝 基本用法

SmartActionsText(
  // 将被解析模式的文本
  text: "Contact me at user@example.com or call +1234567890",
  
  // 应用于所有文本的默认样式
  style: TextStyle(fontSize: 14),
  parse: [
    // 配置电子邮件模式检测
    MatchText(
      type: ParsedType.email,
      style: TextStyle(color: Colors.blue),
      onTap: (email) => print('Tapped on $email'),
    ),
    
    // 配置电话号码模式检测
    MatchText(
      type: ParsedType.phone,
      style: TextStyle(color: Colors.green),
      onTap: (phone) => print('Tapped on $phone'),
    ),
  ],
)
🤳 社交媒体集成

SmartActionsText(
  // 包含社交媒体句柄的文本
  text: "Follow me @username on Twitter!",
  
  parse: [
    MatchText(
      // 正则表达式模式匹配@username格式
      pattern: r"@\w+",
      style: TextStyle(color: Colors.blue),
      
      // 配置社交媒体交互
      interactions: TextInteractions(
        enableSocialProfile: true,  // 启用个人资料打开
        platform: SocialPlatform.twitter,  // 指定平台
        username: "username",  // 用户的个人资料名
        showsocialIcon: true,  // 显示平台图标
        showsocialIconATStart: false,  // 图标位置（开始/结束）
      ),
    ),
  ],
)
🛠️ 自定义交互按钮

SmartActionsText(
  text: "Share this message with others!",
  parse: [
    MatchText(
      // 匹配整个分享文本的模式
      pattern: r"Share this message",
      
      // 配置交互选项
      interactions: TextInteractions(
        enableCopy: true,    // 启用复制功能
        enableShare: true,   // 启用分享功能
        copyIcon: Icon(Icons.copy_all),  // 自定义复制图标
        shareIcon: Icon(Icons.share),    // 自定义分享图标
      ),
    ),
  ],
)
🔍 正则表达式选项

SmartActionsText(
  // 包含URL的多行文本
  text: "Multi-line\ntext with URLs: https://example.com",
  
  // 配置正则表达式匹配选项
  regexOptions: RegexOptions(
    multiLine: true,      // 启用多行匹配
    caseSensitive: false, // 忽略大小写匹配
  ),
  
  parse: [
    // 配置URL模式检测
    MatchText(
      type: ParsedType.url,
      style: TextStyle(color: Colors.blue),
    ),
  ],
)

⚙️ 配置选项

📋 属性
🔧 属性 📚 类型 📄 描述
text String 要解析的文本
parse List<MatchText> 要匹配和配置的模式列表
style TextStyle? 默认文本样式
alignment TextAlign 文本对齐方式
selectable bool 是否可选择文本
softWrap bool 启用/禁用文本换行
maxLines int? 最大行数
🔧 TextInteractions 属性
🔧 属性 📚 类型 📄 描述
enableCopy bool 启用复制功能
enableShare bool 启用分享功能
enableSocialProfile bool 启用社交媒体个人资料访问
platform SocialPlatform? 社交媒体平台（例如，Twitter）
username String? 社交媒体用户名
showsocialIcon bool 显示/隐藏社交媒体图标
showsocialIconATStart bool 在开头显示图标

🤝 贡献

由 ❤️ DevCodeSpace 团队构建

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart'; // For loading SVG icons
import 'package:smart_actions_text/smart_actions_text.dart'; // Main package import
import 'package:url_launcher/url_launcher.dart'; // For launching URLs, emails, and phone calls

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

/// Root application widget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Smart Action Text Demo'),
    );
  }
}

/// Demo page to showcase Smart Action Text features
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(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Container with shadow and rounded corners for better presentation
            Container(
              padding: EdgeInsets.all(5),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withAlpha(26), // Adjust alpha value
                    blurRadius: 10,
                    offset: Offset(0, 2),
                  ),
                ],
              ),
              child: SmartActionsText(
                // Sample text containing various patterns to demonstrate functionality
                text: '''
Hey there! 👋 
              
📧 Reach out to me at contact code@gmail.com
📱 Call or WhatsApp: +1 (234) 567-8900
🔗 Check my portfolio: https://devcodespace.com
🌐 Follow me on social media:
      Twitter: @devcodespace
      LinkedIn: @devcode_space
      Instagram: @dev_code_space''',
                // Base text styling
                style: TextStyle(
                  fontSize: 16,
                  height: 1.5,
                  color: Colors.black87,
                ),
                parse: [
                  // Email pattern matching and handling
                  MatchText(
                    type: ParsedType.email,
                    style: TextStyle(
                      color: Colors.blue[700],
                      fontWeight: FontWeight.w500,
                      decoration: TextDecoration.underline,
                    ),
                    interactions: TextInteractions(
                      enableCopy: true, // Allow copying email
                      enableShare: false,
                      copyIcon: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 2),
                          child: SvgPicture.asset(
                            "assets/email.svg",
                            height: 20,
                          )),
                      showsocialIconATStart: false,
                    ),
                    // Launch email client when tapped
                    onTap: (email) async {
                      final Uri emailUri = Uri(
                        scheme: 'mailto',
                        path: email,
                      );

                      await launchUrl(emailUri);
                    },
                  ),

                  // Phone number detection and handling
                  MatchText(
                    type: ParsedType.phone,
                    style: TextStyle(
                      color: Colors.green[700],
                      fontWeight: FontWeight.w500,
                      decoration: TextDecoration.underline,
                    ),
                    interactions: TextInteractions(
                      enableCopy: true, // Allow copying phone number
                      enableShare: true, // Allow sharing phone number
                      copyIcon: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 2),
                          child: SvgPicture.asset(
                            "assets/call.svg",
                            height: 25,
                          )),
                      shareIcon: SvgPicture.asset(
                        "assets/share.svg",
                        height: 20,
                      ),
                      showsocialIconATStart: false,
                    ),
                    // Launch phone dialer when tapped
                    onTap: (phone) async {
                      final Uri phoneUri = Uri(
                        scheme: 'tel',
                        path: phone,
                      );

                      await launchUrl(phoneUri);
                    },
                  ),

                  // URL detection and handling
                  MatchText(
                    type: ParsedType.url,
                    style: TextStyle(
                      color: Colors.purple[700],
                      fontWeight: FontWeight.w500,
                      decoration: TextDecoration.underline,
                    ),
                    interactions: TextInteractions(
                      showsocialIconATStart: false,
                      enableCopy: true,
                      copyIcon: SvgPicture.asset(
                        "assets/copy.svg",
                        height: 18,
                      ),
                    ),
                    // Open URL in external browser
                    onTap: (url) async {
                      await launchUrl(Uri.parse(url),
                          mode: LaunchMode.externalApplication);
                    },
                  ),

                  // Twitter handle detection and profile linking
                  MatchText(
                    pattern: r"@devcodespace",
                    style: TextStyle(
                      color: Colors.blue[400],
                      fontWeight: FontWeight.w500,
                    ),
                    interactions: TextInteractions(
                      enableSocialProfile: true,
                      platform: SocialPlatform.twitter,
                      username: "allen_musk",
                      socialIcon: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 2),
                        child: Image.asset(
                          "assets/X.png",
                          height: 18,
                        ),
                      ),
                      showsocialIconATStart: true, // Show icon before handle
                    ),
                  ),

                  // LinkedIn handle detection and profile linking
                  MatchText(
                    pattern: r"@devcode_space",
                    style: TextStyle(
                      color: Colors.blue[900],
                      fontWeight: FontWeight.w500,
                    ),
                    interactions: TextInteractions(
                      enableSocialProfile: true,
                      platform: SocialPlatform.linkedin,
                      username: "williamhgates",
                      socialIcon: SvgPicture.asset(
                        "assets/linkedin.svg",
                        height: 20,
                      ),
                      showsocialIconATStart: true, // Show icon before handle
                    ),
                  ),

                  // Instagram handle detection and profile linking
                  MatchText(
                    pattern: r"@dev_code_space",
                    style: TextStyle(
                      color: Colors.pink[400],
                      fontWeight: FontWeight.w500,
                    ),
                    interactions: TextInteractions(
                      enableSocialProfile: true,
                      platform: SocialPlatform.instagram,
                      username: "therock",
                      showsocialIconATStart: true, // Show icon before handle
                      socialIcon: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 2),
                        child: SvgPicture.asset(
                          "assets/instagram.svg",
                          height: 20,
                        ),
                      ),
                    ),
                  ),
                ],
                alignment: TextAlign.left,
                softWrap: true,
                textScaleFactor: 1.0,
              ),
            )
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中集成和使用smart_actions_text插件的一个示例。这个插件假设提供了一些智能文本操作功能，虽然具体的API和功能可能需要根据实际插件的文档进行调整。

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

dependencies:
  flutter:
    sdk: flutter
  smart_actions_text: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来获取这个依赖。

接下来，我们编写一个示例代码来展示如何使用这个插件。假设smart_actions_text插件提供了一个能够识别并高亮显示文本中URL的功能。

示例代码

  1. 创建Flutter项目（如果还没有的话）：
flutter create my_flutter_app
cd my_flutter_app

  1. 更新pubspec.yaml（如上所示）。

  2. 编写示例UI：

在lib/main.dart文件中，你可以这样编写代码：

import 'package:flutter/material.dart';
import 'package:smart_actions_text/smart_actions_text.dart';  // 假设插件的导入路径

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

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

class MyHomePage extends StatelessWidget {
  final String textWithUrls = "访问我们的网站 https://www.example.com 获取更多信息，或者查看我们的GitHub页面 https://github.com/example/repo。";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Smart Actions Text Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SmartActionsText(
          text: textWithUrls,
          actionBuilders: [
            // 假设插件提供了一个可以识别URL的action
            SmartActionBuilder(
              type: 'url',  // 根据插件文档设置正确的类型
              builder: (context, url) {
                return TextSpan(
                  text: url,
                  style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // 打开URL
                      if (canLaunch(url)) {
                        launch(url);
                      } else {
                        throw 'Could not launch $url';
                      }
                    },
                );
              },
            ),
            // 可以添加更多的actionBuilders来识别其他类型的文本
          ],
        ),
      ),
    );
  }
}

// 导入用于打开URL的包
import 'package:flutter/services.dart' show canLaunch, launch;

解释

  1. 依赖导入：首先导入smart_actions_text包。
  2. 示例文本：定义了一个包含URL的字符串。
  3. UI布局：使用Scaffold和Padding来构建基本的UI布局。
  4. SmartActionsText：使用SmartActionsText小部件并传递要处理的文本和一个actionBuilders列表。每个actionBuilder负责识别特定类型的文本（如URL）并返回一个TextSpan，该TextSpan定义了文本的样式和点击时的行为。
  5. 打开URL：使用flutter/services.dart中的canLaunch和launch函数来打开识别的URL。

请注意，上述代码是基于假设的smart_actions_text插件的功能编写的。实际的插件可能具有不同的API和用法，因此请务必参考插件的官方文档以获取准确的信息和示例代码。

回到顶部