Flutter格式化文本插件formatted_text的使用

Introduction

Formatted Text 是一个用于Flutter的文本格式化包。它允许你将多个样式应用于同一段文本，并且可以将子样式与父样式合并，以实现更复杂的文本展示效果。这个包包括了文本视图、文本编辑控制器和选择工具栏等功能。

Getting Started

添加依赖项

在 pubspec.yaml 文件中添加 formatted_text 依赖：

dependencies:
  formatted_text: ^latest-version

如果你正在使用 flutter_hooks，则应使用 formatted_text_hooks：

dependencies:
  formatted_text_hooks: ^latest-version

导入包

在 Dart 文件中导入 formatted_text 包：

import 'package:formatted_text/formatted_text.dart';

如果你使用的是 formatted_text_hooks，则应如下导入：

import 'package:formatted_text_hooks/formatted_text_hooks.dart';

Usage Examples

Text View

基础样式

• 粗体：使用 * 包裹文本。
• 斜体：使用 _ 包裹文本。
• 删除线：使用 ~ 包裹文本。
• 下划线：使用 # 包裹文本。

示例代码：

FormattedText('*This text is bold*',)
FormattedText('_This text is Italic_',)
FormattedText('~This text has strikethrough~',)
FormattedText('#This text has underline#',)

多样式组合

你可以同时应用多种样式，例如粗体和斜体的组合：

FormattedText('_This is *Bold Italic* Italic_')

Text Editing Controller

创建一个 FormattedTextEditingController 来控制可编辑的文本：

final textEditingController = FormattedTextEditingController();

如果使用 hooks，则可以这样创建：

final textEditingController = useFormattedTextController();

Custom Formatters

你可以定义自定义的格式器来覆盖默认的格式规则。例如，定义一个橙色文本的格式器：

FormattedText(
  '==This text is orange==',
  formatters: [
    ... FormattedTextDefaults.formattedTextDefaultFormatters,
    FormattedTextFormatter(
      patternChars: '==',
      style: TextStyle(color: Colors.orange),
    )
  ],
)

Context Menu Builder

为了获得带有默认格式菜单项的自适应文本选择工具栏，你可以这样做：

contextMenuBuilder: (BuildContext context, EditableTextState editableTextState) {
  return FormattedTextContextMenuBuilder.adaptiveTextSelectionToolbar(
    editableTextState: editableTextState,
  );
}

如果你想添加自定义的上下文菜单项，可以这样做：

contextMenuBuilder: (BuildContext context, EditableTextState editableTextState) {
  return FormattedTextContextMenuBuilder.adaptiveTextSelectionToolbar(
    editableTextState: editableTextState,
    items: [
      ...FormattedTextDefaults.formattedTextDefaultContextMenuItems,
      const FormattedTextContextMenuItem(
        label: 'Orange',
        patternChars: '==',
      ),
    ],
  );
},

Selection Controls

显示自定义的选择控件：

selectionControls: FormattedTextSelectionControls(),

你可以通过 ToolbarOptions 修改剪切、复制、粘贴和全选动作的可用性：

toolbarOptions: ToolbarOptions(
  cut: false,
  copy: false,
  paste: false,
  selectAll: true,
)

Custom Toolbar Actions

提供自定义的动作会覆盖默认动作（但不包括剪切、复制、粘贴和全选）：

selectionControls: FormattedTextSelectionControls(
  actions: [
    ... FormattedTextDefaults.formattedTextToolbarDefaultActions,
    FormattedTextToolbarAction(
      label: 'Orange',
      patternChars: '==',
    )
  ],
)

示例 Demo

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 formatted_text 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Formatted Text Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final textEditingController = FormattedTextEditingController();

  String _value = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Formatted Text Demo'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: FormattedText(
                _value,
              ),
            ),
          ),
          Expanded(
            child: Center(
              child: TextField(
                controller: textEditingController,
                onChanged: (value) {
                  setState(() {
                    _value = value;
                  });
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用程序，其中包含一个文本字段和一个显示格式化文本的区域。用户可以在文本字段中输入带格式标记的文本（如 *bold* 或 _italic_），并在下方实时查看格式化后的效果。

希望这些信息对你有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。