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

RichTextWriter 可以用来编写带有格式的文本。

基本文本

基本文本通过指定的分隔符和持续时间来打印。

// 富文本的基本用法
RichTextWriter(
  '''
  Whether you're a brother or whether you're a mother
  You're stayin' alive, stayin' alive
  Feel the city breakin' and everybody shakin'
  And we're stayin' alive, stayin' alive
  Ah, ha, ha, ha, stayin' alive, stayin' alive
  Ah, ha, ha, ha, stayin' alive
  ''',
  // 持续时间（毫秒）
  duration: 25,
  // 分隔符
  delimiter: " ",
);

富文本

可以像在 RichText 中一样组合 TextSpan。

// 富文本的使用
RichTextWriter.span(
  TextSpan(
    children: [
      // 第一个文本片段
      const TextSpan(
        text: 'You can also compose the text with a ',
        style: TextStyle(
          color: Colors.black,
          fontSize: 14,
        ),
      ),
      // 第二个文本片段
      const TextSpan(
        text: 'TextSpan',
        style: TextStyle(
          color: Colors.blue,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
      ),
      // 第三个文本片段
      const TextSpan(
        text:
            "\nwhich let's you do all the normal rich features including widgets:\n",
        style: TextStyle(
          color: Colors.black,
          fontStyle: FontStyle.italic,
          fontSize: 14,
        ),
      ),
      // 嵌入一个容器作为小部件
      WidgetSpan(
        child: Container(
          height: 40,
          width: 40,
          color: Colors.green,
        ),
      ),
      // 空格间隔
      const TextSpan(text: " "),
      // 最后一个文本片段
      TextSpan(
          text: "and tappable text.",
          style: const TextStyle(
            color: Colors.blue,
            fontSize: 16,
            decoration: TextDecoration.underline,
          ),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              showDialog<String>(
                context: context,
                builder: (BuildContext context) => AlertDialog(
                  title: const Text('AlertDialog Title'),
                  content: const Text('AlertDialog description'),
                  actions: <Widget>[
                    TextButton(
                      onPressed: () => Navigator.pop(context, 'Cancel'),
                      child: const Text('Cancel'),
                    ),
                    TextButton(
                      onPressed: () => Navigator.pop(context, 'OK'),
                      child: const Text('OK'),
                    ),
                  ],
                ),
              );
            }),
    ],
  ),
  duration: 25,
  delimiter: " ",
);

扩展文本

ExtendedTextSpan 和 ExtendedWidgetSpan 支持自定义文本编写，包括可变的持续时间和开始/完成处理程序。

// 扩展文本的使用
RichTextWriter.span(
  TextSpan(
    children: [
      const TextSpan(
        text: 'You can use an ',
        style: TextStyle(
          color: Colors.black,
          fontSize: 14,
        ),
      ),
      const TextSpan(
        text: 'ExtendedTextSpan',
        style: TextStyle(
          color: Colors.blue,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
      ),
      const TextSpan(
        text: " In place of a TextSpan to add additional behavior, like ",
        style: TextStyle(
          color: Colors.black,
          fontStyle: FontStyle.italic,
          fontSize: 14,
        ),
      ),
      // 使用扩展文本片段
      ExtendedTextSpan(
        children: [
          ExtendedTextSpan(
            text: 'Variable text duration',
            duration: 300,
            style: const TextStyle(
              color: Colors.blue,
              fontWeight: FontWeight.bold,
              fontSize: 14,
            ),
          ),
          const TextSpan(text: ' and an '),
          ExtendedTextSpan(
            text: 'onComplete',
            style: const TextStyle(
              color: Colors.black,
              fontStyle: FontStyle.italic,
              fontSize: 14,
            ),
            duration: 100,
          ),
          const TextSpan(
            text:
                ' handler that should be making a dialog show up right about...',
          ),
          ExtendedTextSpan(
            text: 'Now',
            duration: 200,
            style: const TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.bold,
              fontSize: 14,
            ),
          ),
        ],
        style: const TextStyle(
          color: Colors.black,
          fontSize: 14,
        ),
        // 完成时调用的回调函数
        onComplete: () {
          showDialog<String>(
            context: context,
            builder: (BuildContext context) => AlertDialog(
              title: const Text('AlertDialog Title'),
              content: const Text('AlertDialog description'),
              actions: <Widget>[
                TextButton(
                  onPressed: () => Navigator.pop(context, 'Cancel'),
                  child: const Text('Cancel'),
                ),
                TextButton(
                  onPressed: () => Navigator.pop(context, 'OK'),
                  child: const Text('OK'),
                ),
              ],
            ),
          );
        },
      ),
    ],
  ),
  duration: 25,
  delimiter: " ",
);

示例代码

下面是完整的示例代码，展示了如何使用 RichTextWriter 插件：

import 'package:example/demos.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _demoIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Container(
        padding: const EdgeInsets.only(
          top: 100,
          left: 200,
          right: 200,
        ),
        alignment: Alignment.center,
        child: demos[_demoIndex](context),
      ),
      floatingActionButton: _demoIndex + 1 < demos.length
          ? FloatingActionButton.extended(
              label: const Text('Next'),
              onPressed: () {
                setState(() {
                  _demoIndex++;
                });
              },
            )
          : null,
    );
  }
}