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

simple_rich_text 是一个Flutter插件，它允许开发者通过简单的格式化字符来快速为文本添加颜色和格式。这个插件旨在以最低的开发摩擦力为文本增加样式。

格式化字符

这些格式化字符是非标准的（即不与Markdown兼容），但在作者看来更加直观：

示例输入

SimpleRichText(r'*_/this is all three*_/ (*{color:red}bold*, _{color:green}underlined_, and /{color:brown}italicized/). _{push:home;color:blue}clickable hyperlink to home screen_')

示例Flutter输出

属性

属性对放在花括号中紧跟在第一个字符标记之后。每个对用分号(;)分隔，可以任意顺序。每个对的语法是name:value。

颜色支持示例

"this is blue hyperlink to the _{color:blue,push:calendar}calendar_ screen"

特性

• 支持通过在格式化文本前加上路由名称来创建到其他屏幕的文本超链接，例如："… {calendar}转到日历页面".

示例输入

以下是一些simple_rich_text支持的输入样例：

'this is /italic/'
'this is *bold*'
'*_/this is all three*_/ (*bold*, _underlined_, and /italicized/)'
'you can quote characters to NOT format a word \*bold\*'
'this is _underline_'
'go to _{/myroute}home_ page'
'this is ~important~(red).'
'this is _*bold and underlined*_.'

注意事项

你可以同时使用多个字符，并且不像HTML那样需要严格的匹配顺序。比如：

"these are */equivalent/* and works without problems."
"these are */equivalent*/ and works without problems."

要求

父级组件必须设置textDirection（由内部RichText小部件要求），可以通过MaterialApp小部件或显式地用Directionality小部件包装来实现：

Directionality(
    child: SimpleRichText('Peter', term: 't'),
    textDirection: TextDirection.ltr)

示例代码

以下是一个完整的示例代码，演示了如何使用simple_rich_text插件：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String text =
        r'Now you can change the ~{fontSize:32}size~ of the text. \nInsert a new line.\nChange the ~{backgroundColor:yellow}background color~\nAnd modify more style as: fontFamily, _{decorationColor:blue}decorationColor_, ~{height:3}height~, etc\n\nToo you can open url: _{http:www.google.com;color:blue}go to Google_\nFinaly, you can define textAlign, maxLines and textOverflow';

    return MaterialApp(
      builder: (BuildContext context, Widget child) {
        final MediaQueryData data = MediaQuery.of(context);
        return MediaQuery(
          data: data.copyWith(textScaleFactor: 3),
          child: child,
        );
      },
      home: Scaffold(
        body: Center(
          child: SimpleRichText(
            text,
            logIt: false,
            maxLines: 20,
            pre: TextSpan(
                text: 'PRE',
                style: TextStyle(color: Colors.purple)),
            post: TextSpan(
                text: 'POST',
                style: TextStyle(color: Colors.purple)),
            style: TextStyle(color: Colors.orange),
            textAlign: TextAlign.center,
            textOverflow: TextOverflow.ellipsis,
            textScaleFactor: 1.5,
          ),
        ),
      ),
    );
  }
}

此代码展示了如何配置SimpleRichText，包括文本内容、前置和后置文本、文本样式、对齐方式、超出显示省略号等属性。此外，还展示了如何通过MediaQuery调整全局文本缩放因子。