Flutter文本处理插件utils_rinch_text的使用

Flutter文本处理插件utils_rinch_text的使用

utils_rinch_text 是一个用于在Flutter中处理富文本的插件，它可以帮助你将带有HTML标签的字符串转换为 TextSpan，从而实现对文本的格式化。该插件支持多种常见的HTML标签，并允许你自定义标签样式。

支持的标签

• <a>：链接（示例：Link web）
• <p>：段落（示例：

  添加段落

  ）

自定义标签

你可以通过 customTags 参数来定义自定义标签及其对应的样式。例如：

• <i>：加粗并设置字体大小
• <l>：红色加粗文本
• <a>：绿色加粗链接
• <o>：蓝色加粗文本
• <b>：橙色加粗文本

示例图片

示例代码

以下是一个完整的示例，展示了如何使用 utils_rinch_text 插件来处理富文本：

import 'package:flutter/material.dart';
import 'package:utils_rinch_text/utils_rinch_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'),
    );
  }
}

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> {
  // 定义一个包含HTML标签的示例文本
  String textExample = """
  <i>Flutter</i> is an open source mobile app development framework <l>created by Google.</l> 
  It enables the creation of native apps for <i>iOS and Android</i> with a single Dart code base. 
  With its flexible and performant architecture, <o>Flutter has become one of the most 
  popular options for building mobile apps.</o> In addition, it offers a wide range of widgets 
  and animated visual effects that help you create attractive and intuitive applications. <p>
  For more information about Flutter, head over to the main 
  page at <a>https://flutter.dev/</a> and start <b>exploring the possibilities</b> 
  of this powerful app development tool.
  """;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: RichText(
          text: TextSpan(
            children: UtilsRinchText.generate(
              textExample, // 传入包含HTML标签的文本
              customTags: {
                // 自定义标签及其样式
                "<i>": const TextStyle(
                  fontWeight: FontWeight.bold, // 加粗
                  fontSize: 20, // 字体大小
                ),
                "<l>": const TextStyle(
                  fontSize: 20, // 字体大小
                  color: Colors.red, // 红色
                  fontWeight: FontWeight.bold, // 加粗
                ),
                "<a>": const TextStyle(
                  color: Colors.green, // 绿色
                  fontWeight: FontWeight.bold, // 加粗
                ),
                "<o>": const TextStyle(
                  fontWeight: FontWeight.bold, // 加粗
                  color: Colors.blue, // 蓝色
                  fontSize: 20, // 字体大小
                ),
                "<b>": const TextStyle(
                  fontWeight: FontWeight.bold, // 加粗
                  color: Colors.orange, // 橙色
                  fontSize: 20, // 字体大小
                ),
              },
            ),
          ),
        ),
      ),
    );
  }
}