Flutter富文本样式插件styled_text_advance的使用

在您的Flutter项目中，可以使用styled_text_advance插件来处理富文本样式。这个插件通过XML标签来格式化文本，并且支持插入图标和小部件。

安装和导入

首先，在pubspec.yaml文件中添加依赖：

dependencies:
  ...
  styled_text_advance: ^[version]

然后在您的Dart文件中导入包：

import 'package:styled_text_advance/styled_text_advance.dart';

示例代码

以下是一个简单的示例，展示了如何使用styled_text_advance插件来格式化文本。

基本用法

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StyledTextAdvance Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const DemoPage(),
    );
  }
}

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

  void _alert(BuildContext context) {
    showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Tapped'),
          actions: <Widget>[
            TextButton(
              child: const Text('Ok'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  void _openLink(BuildContext context, Map<String?, String?> attrs) {
    final String link = attrs['href'] ?? "";

    showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Open Link'),
          content: Text(link),
          actions: <Widget>[
            TextButton(
              child: const Text('Ok'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return SelectionArea(
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Styled Text Advance'),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                // 简单的格式化文本
                StyledTextAdvance(
                  text: 'Test: &lt;b&gt;bold&lt;/b&gt; text.',
                  tags: {
                    'b': StyledTextAdvanceTag(
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                  },
                ),

                // 文本中的引用
                const SizedBox(height: 20),
                StyledTextAdvance(
                  text: 'Quoted Test: &lt;b&gt;&amp;quot;bold&amp;quot;&lt;/b&gt; text.',
                  tags: {
                    'b': StyledTextAdvanceTag(
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                  },
                ),

                // 多行文本不换行
                const SizedBox(height: 20),
                StyledTextAdvance(
                  text: """Multiline text  (no breaks)""",
                  tags: {
                    'b': StyledTextAdvanceTag(
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                  },
                ),

                // 多行文本换行
                const SizedBox(height: 20),
                StyledTextAdvance(
                  text: """Multiline text (with breaks)""",
                  newLineAsBreaks: true,
                  tags: {
                    'b': StyledTextAdvanceTag(
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                  },
                ),

                // 自定义标签样式
                const SizedBox(height: 20),
                StyledTextAdvance(
                  text:
                      'Test: &lt;bold&gt;bold&lt;/bold&gt; and &lt;red&gt;red color&lt;/red&gt; text.',
                  tags: {
                    'bold': StyledTextAdvanceTag(
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    'red': StyledTextAdvanceTag(
                        style: const TextStyle(
                            fontWeight: FontWeight.bold, color: Colors.red)),
                  },
                ),

                // 图标
                const SizedBox(height: 20),
                StyledTextAdvance(
                  text: 'Text with alarm &lt;alarm/&gt; icon.',
                  tags: {
                    'alarm': StyledTextAdvanceIconTag(Icons.alarm),
                  },
                ),

                // 图片
                const SizedBox(height: 20),
                StyledTextAdvance(
                  text: 'Here is a local image: &lt;img&gt;assets/image.jpg&lt;/img&gt;.',
                  tags: {
                    'img': StyledTextAdvanceImageTag(
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                    ),
                  },
                ),

                // 音频
                const SizedBox(height: 20),
                StyledTextAdvance(
                  text:
                      'Here is a local audio file: &lt;audio&gt;assets/happy-day-148320.mp3&lt;/audio&gt;.',
                  tags: {
                    'audio': StyledTextAdvanceAudioTag(
                      onTap: (String? text, Map<String?, String?>? attributes) {
                        // 日志输出音频文件正在播放
                        print("Playing audio file: $text");

                        // 显示一个Snack Bar作为UI更新
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(
                            content: Text('Playing audio: $text'),
                            duration: Duration(seconds: 2),
                          ),
                        );
                      },
                    ),
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

解析与注释

基本格式化：使用标签来设置文本为粗体。

StyledTextAdvance(
  text: 'Test: &lt;b&gt;bold&lt;/b&gt; text.',
  tags: {
    'b': StyledTextAdvanceTag(
        style: const TextStyle(fontWeight: FontWeight.bold)),
  },
)

多行文本：通过设置newLineAsBreaks参数来控制是否自动将换行符转换为 标签。

StyledTextAdvance(
  text: """Multiline text (with breaks)""",
  newLineAsBreaks: true,
  tags: {
    'b': StyledTextAdvanceTag(
        style: const TextStyle(fontWeight: FontWeight.bold)),
  },
)

自定义标签样式：通过定义不同的标签样式来改变文本的颜色或字体。

StyledTextAdvance(
  text:
      'Test: &lt;bold&gt;bold&lt;/bold&gt; and &lt;red&gt;red color&lt;/red&gt; text.',
  tags: {
    'bold': StyledTextAdvanceTag(
        style: const TextStyle(fontWeight: FontWeight.bold)),
    'red': StyledTextAdvanceTag(
        style: const TextStyle(
            fontWeight: FontWeight.bold, color: Colors.red)),
  },
)

插入图标：使用StyledTextAdvanceIconTag来插入图标。

StyledTextAdvance(
  text: 'Text with alarm &lt;alarm/&gt; icon.',
  tags: {
    'alarm': StyledTextAdvanceIconTag(Icons.alarm),
  },
)

插入图片：使用StyledTextAdvanceImageTag来插入本地图片。

StyledTextAdvance(
  text: 'Here is a local image: &lt;img&gt;assets/image.jpg&lt;/img&gt;.',
  tags: {
    'img': StyledTextAdvanceImageTag(
      width: 100,
      height: 100,
      fit: BoxFit.cover,
    ),
  },
)

插入音频：使用StyledTextAdvanceAudioTag来插入音频文件。

StyledTextAdvance(
  text:
      'Here is a local audio file: &lt;audio&gt;assets/happy-day-148320.mp3&lt;/audio&gt;.',
  tags: {
    'audio': StyledTextAdvanceAudioTag(
      onTap: (String? text, Map<String?, String?>? attributes) {
        // 日志输出音频文件正在播放
        print("Playing audio file: $text");

        // 显示一个Snack Bar作为UI更新
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Playing audio: $text'),
            duration: Duration(seconds: 2),
          ),
        );
      },
    ),
  },
)

更多关于Flutter富文本样式插件styled_text_advance的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

更多关于Flutter富文本样式插件styled_text_advance的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

styled_text_advance 是一个 Flutter 插件，用于在 Flutter 应用中创建富文本样式。它允许你通过简单的标记语法来定义文本样式，如加粗、斜体、下划线、颜色、字体大小等。以下是如何使用 styled_text_advance 的基本指南。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 styled_text_advance 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  styled_text_advance: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 基本使用

styled_text_advance 提供了一个 StyledText 小部件，你可以在其中使用简单的标记语法来定义富文本。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('StyledTextAdvance Example')),
        body: Center(
          child: StyledText(
            text: 'Hello, <b>world</b>! This is <i>italic</i> and <u>underlined</u>.',
            tags: {
              'b': StyledTextTag(style: TextStyle(fontWeight: FontWeight.bold)),
              'i': StyledTextTag(style: TextStyle(fontStyle: FontStyle.italic)),
              'u': StyledTextTag(style: TextStyle(decoration: TextDecoration.underline)),
            },
          ),
        ),
      ),
    );
  }
}

在这个例子中，StyledText 小部件使用了 , , 和  标签来分别表示加粗、斜体和下划线文本。

3. 自定义标签

你可以定义自己的标签，并为它们指定样式。

StyledText(
  text: 'This is <red>red</red> and <green>green</green> text.',
  tags: {
    'red': StyledTextTag(style: TextStyle(color: Colors.red)),
    'green': StyledTextTag(style: TextStyle(color: Colors.green)),
  },
)

4. 嵌套标签

你还可以嵌套标签来实现更复杂的样式。

StyledText(
  text: 'This is <b><i>bold and italic</i></b> text.',
  tags: {
    'b': StyledTextTag(style: TextStyle(fontWeight: FontWeight.bold)),
    'i': StyledTextTag(style: TextStyle(fontStyle: FontStyle.italic)),
  },
)

5. 处理点击事件

styled_text_advance 还支持为特定标签添加点击事件。

StyledText(
  text: 'Click <link>here</link> to visit our website.',
  tags: {
    'link': StyledTextTag(
      style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
      onTap: () {
        print('Link clicked!');
      },
    ),
  },
)