Flutter富文本编辑插件lavie_rich_text的使用

特性

以下是lavie_rich_text插件的一些主要特性：

• 富文本展示组件，支持各种文字富文本，但不支持图片。

• 使用`LVRichText`时，无需手动拆分字符串。你可以从一开始就输入完整的字符串，并且只需单独设置需要格式化的子字符串即可。

• `LVRichTextConfig`类用于定义要格式化的字符串及其配置信息。

• 请注意，`LVRichTextConfig`类中的`targetString`既可以是单个字符串（`String`），也可以是字符串数组（`List`）。

• 该组件内部存在一些小问题，例如当一个`targetString`被另一个`targetString`包含时，两者的富文本设置可能会发生冲突，不会叠加。

使用方法

以下是如何在Flutter项目中使用lavie_rich_text插件的示例代码：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:lavie_rich_text/src/rich_text.dart';
import 'package:lavie_rich_text/src/rich_text_config.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 MaterialApp(
      title: 'Flutter Rich Text Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  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: Center(
        child: LVRichText(
          "啦啦啦蓝色加粗italic上标下标蓝色红色1红色12红色123红色红色green哈啊哈Green点击这里响应事件电话+86 18868876045网址http://www.baidu.com",
          // 设置文本的默认展示样式
          defaultTextStyle: const TextStyle(
            color: Colors.orange,
          ),
          // 不区分大小写
          caseSensitive: false,
          // 是否可以长按选中，true可以
          selectable: false,
          configList: [
            LVRichTextConfig(
              targetString: "蓝色",
              // 设置目标字符串的前后字符串，以限制匹配到指定的字符串
              stringBeforeTarget: "啦啦啦",
              stringAfterTarget: "加粗",
              style: const TextStyle(
                color: Colors.blue,
              ),
            ),
            LVRichTextConfig(
              targetString: "加粗",
              style: const TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
            LVRichTextConfig(
              targetString: "italic",
              style: const TextStyle(
                fontStyle: FontStyle.italic,
              ),
            ),
            LVRichTextConfig(
              // 设置上下标与selectable: true冲突
              targetString: "上标",
              superScript: true,
            ),
            LVRichTextConfig(
              targetString: "下标",
              subScript: true,
            ),
            LVRichTextConfig(
              targetString: "红色",
              // 只修改匹配到的指定位置的字符串
              matchOption: LVRichTextMatchOption.specifiedIndexs,
              matchSpecifiedIndexs: [3, 4],
              style: const TextStyle(
                color: Colors.red,
              ),
            ),
            LVRichTextConfig(
              targetString: "green",
              style: const TextStyle(
                color: Colors.green,
              ),
            ),
            LVRichTextConfig(
              targetString: "点击这里响应事件",
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 30,
              ),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  print("点击邮箱");
                },
            ),
            // LVRichTextConfig(
            //   // 根据正则表达式去匹配字符串
            //   // 注意，直接根据正则表达式去匹配字符串的话，很容易与其他的冲突，所以尽可能避免正则与其他匹配方式一起使用
            //   targetString: "[0-9]*",
            //   style: const TextStyle(
            //     fontWeight: FontWeight.bold,
            //     fontSize: 30,
            //   ),
            // ),
            LVRichTextConfig(
                targetString: "+86 18868876045",
                // 如果targetString中包含特殊字符，则需要设置hasSpecialCharacters: true
                hasSpecialCharacters: true,
                style: const TextStyle(
                  decoration: TextDecoration.underline,
                )),
          ],
        ),
      ),
    );
  }
}