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

Super Rich Text

Super Rich Text 是一个Flutter插件，它以最简单的方式对自定义文本片段进行样式设置。下面我们将详细介绍如何使用这个插件，并提供完整的示例demo。

默认样式

在标准标记中，“*”被设置为粗体，而“/”被设置为斜体，如以下示例：

SuperRichText(
  text: 'Text in *bold* and /italic/'
)

自定义标记

你可以通过传递其他标签列表来更改和设置自己的标记：

SuperRichText(
  text: 'Text in *bold* and /italic/ with color llOrangell and color rrRedrr',
  style: TextStyle(
    color: Colors.black87,
    fontSize: 22
  ),
  othersMarkers: [
    MarkerText(
      marker: 'll',
      style: TextStyle(
        color: Colors.orangeAccent
      )
    ),
    MarkerText(
      marker: 'rr',
      style: TextStyle(
          color: Colors.redAccent
      )
    ),
  ],
)

覆盖全局标记

你可以通过设置 useGlobalMarkers 属性为 false 来覆盖全局标记：

SuperRichText(
  text: 'Text in *bold* and /italic/ with color llOrangell and color rrRedrr',
  useGlobalMarkers: false, // set false
  style: TextStyle(
    color: Colors.black87,
    fontSize: 22
  ),
  othersMarkers: [
    MarkerText(
        marker: '*',
        style: TextStyle(
            color: Colors.orangeAccent
        )
    )...
  ],
)

全局标记

你还可以区分全局标记：

SuperRichText.globalMarkerTexts.add(MarkerText(
    marker: '|',
    style: TextStyle(
      color: Colors.deepPurple
    )
  )
);

插入链接

你可以直接在文本中插入函数或链接：

MarkerText.withUrl(
  marker: 'll',
  urls: [
    'https://www.google.com',
    'https://www.facebook.com'
  ],
  style: TextStyle(
    fontSize: 36,
    color: Colors.orangeAccent
  )
)

在这种情况下，链接列表应与文本中的链接顺序完全相同。例如，如果基础文本是 “this text has llLink1ll and llLink2ll”，则上面的例子会将 Link1 设置为 ‘https://www.google.com’，将 Link2 设置为 ‘https://www.facebook.com’。

插入函数

函数的顺序也应该是相同的，但调用应该像这样：

MarkerText.withFunction(
  marker: '<ff>',
  functions: [
    () => print('function 1'),
    () => print('function 2')
  ],
  style: TextStyle(
    color: Colors.greenAccent
  )
)

如果你的文本中有多个单词执行相同的函数并具有相同的样式，你可以这样做：

MarkerText.withSameFunction(
  marker: '<sf>',
  function: print('same function'),
  style: TextStyle(
    color: Colors.greenAccent
  )
)

完整示例代码

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

class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //添加全局标记
    SuperRichText.globalMarkerTexts.add(
        MarkerText(marker: '|', style: TextStyle(color: Colors.deepPurple)));

    return Scaffold(
      body: Center(
          child: SuperRichText(
        text:
            'Text in *bold* and /italic/ with color ooOrangeoo and color rrRedrr, '
            'llLink1ll llLink2ll, <f>Function1<f> - <f>Function2<f> <sf>Same Fun<sf> '
            'and repeat <sf>Same Fun<sf>',
        style: TextStyle(color: Colors.black87, fontSize: 22),
        othersMarkers: [
          MarkerText(
              marker: 'oo', style: TextStyle(color: Colors.orangeAccent)),
          MarkerText(marker: 'rr', style: TextStyle(color: Colors.redAccent)),
          MarkerText.withUrl(
              marker: 'll',
              urls: ['https://www.google.com', 'https://www.facebook.com']),
          MarkerText.withFunction(
              marker: '<f>',
              functions: [() => print('function 1'), () => print('function 2')],
              onError: (i, msg) => print('$i -> $msg'),
              style: TextStyle(color: Colors.greenAccent)),
          MarkerText.withSameFunction(
              marker: '<sf>',
              function: () => print('function'),
              onError: (msg) => print('$msg'),
              style: TextStyle(color: Colors.purple))
        ],
      )),
    );
  }
}

希望这个帖子能帮助你更好地理解和使用 super_rich_text 插件！如果有任何问题或需要进一步的帮助，请随时提问。