Flutter富文本处理插件attributed_text的使用

Easily add metadata to your Strings with the attributed_text package.

Get Started

AttributedText 结合了一个 String 和一些 Attribution 跨度。

import 'package:attributed_text/attributed_text.dart';

void main() {
  // 定义一些常用的 Attributions
  final bold = NamedAttribution("bold");
  final italics = NamedAttribution("italics");
  final underline = NamedAttribution("underline");

  // 创建一个 AttributedText 实例
  final helloWorld = AttributedText(
    text: "Hello, world!",
    spans: AttributedSpans(
      attributions: [
        const SpanMarker(attribution: bold, offset: 7, markerType: SpanMarkerType.start),
        const SpanMarker(attribution: bold, offset: 12, markerType: SpanMarkerType.end),
      ],
    ),
  );

  // 打印结果
  print(helloWorld);
}

在这个例子中，我们为从索引 7 到索引 12 的字符关联了一个名为 bold 的 Attribution。逻辑上，你可以认为这个 AttributedText 看起来像 “Hello, world!”。

What is an Attribution?

Attribution 是与 AttributedSpans 中的字符关联的元数据。

例如，一个文本编辑器可能会定义 Attribution 来表示粗体、斜体、下划线、删除线、链接和内联代码。

Named Attributions

只需要一个名称的 Attribution 可以轻松地定义为 NamedAttribution。

final bold = NamedAttribution("bold");
final italics = NamedAttribution("italics");
final underline = NamedAttribution("underline");

两个 NamedAttribution 如果名称相同，则被认为是等效的。

Custom Attributions

任何实现了 Attribution 接口的对象都可以用作 AttributedText 中的 Attribution。

你可能需要定义自己的自定义 Attribution 类来表示包含更多信息的元数据。

例如，你可以实现一个 LinkAttribution：

/// Attribution 用于在 [AttributedText] 中表示链接。
///
/// 每个 [LinkAttribution] 都被认为是等效的，因此 [AttributedText] 会防止多个 [LinkAttribution] 重叠。
class LinkAttribution implements Attribution {
  LinkAttribution({
    required this.url,
  });

  @override
  String get id => 'link';

  final Uri url;

  @override
  bool canMergeWith(Attribution other) {
    return this == other;
  }

  @override
  bool operator ==(Object other) =>
      identical(this, other) || other is LinkAttribution && runtimeType == other.runtimeType && url == other.url;

  @override
  int get hashCode => url.hashCode;
}

任何两个具有相同 id 的 Attribution 实例将被防止重叠。如果两个具有相同 id 的 Attribution 相邻，AttributedText 将检查其中一个是否可以与另一个合并——如果可以，它们将被合并。

示例代码

以下是一个完整的示例代码，展示了如何使用 attributed_text 插件创建和显示富文本。

import 'package:flutter/material.dart';
import 'package:attributed_text/attributed_text.dart';
import 'package:super_editor/super_editor.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AttributedText Example')),
        body: Center(
          child: SuperEditor(
            document: Document(
              nodes: [
                ParagraphNode(
                  id: DocumentEditor.createNodeId(),
                  text: AttributedText(
                    text: "Hello, world!",
                    spans: AttributedSpans(
                      attributions: [
                        const SpanMarker(attribution: bold, offset: 7, markerType: SpanMarkerType.start),
                        const SpanMarker(attribution: bold, offset: 12, markerType: SpanMarkerType.end),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            editor: DocumentEditor(
              document: Document(
                nodes: [
                  ParagraphNode(
                    id: DocumentEditor.createNodeId(),
                    text: AttributedText(
                      text: "This is a link to Flutter: ",
                      spans: AttributedSpans(
                        attributions: [
                          const SpanMarker(attribution: linkAttribution, offset: 24, markerType: SpanMarkerType.start),
                          const SpanMarker(attribution: linkAttribution, offset: 31, markerType: SpanMarkerType.end),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            stylesheet: DefaultStylesheet(),
          ),
        ),
      ),
    );
  }
}

// 定义一些常用的 Attributions
final bold = NamedAttribution("bold");
final italics = NamedAttribution("italics");
final underline = NamedAttribution("underline");

// 自定义 LinkAttribution
final linkAttribution = LinkAttribution(url: Uri.parse("https://flutter.dev"));

class LinkAttribution implements Attribution {
  LinkAttribution({
    required this.url,
  });

  @override
  String get id => 'link';

  final Uri url;

  @override
  bool canMergeWith(Attribution other) {
    return this == other;
  }

  @override
  bool operator ==(Object other) =>
      identical(this, other) || other is LinkAttribution && runtimeType == other.runtimeType && url == other.url;

  @override
  int get hashCode => url.hashCode;
}

在这个示例中，我们创建了一个简单的 Flutter 应用程序，并使用 SuperEditor 显示了带有 AttributedText 的富文本。我们定义了一些常用的 Attribution，并创建了一个自定义的 LinkAttribution 来表示链接。