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

发布于 1周前 作者 yibo5220 来自 Flutter

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

pub package codecov

Notus 是一个用于 Zefyrka 项目的富文本文档模型。

示例代码

完整示例可以从 example/main.dart 查看。

import 'package:notus_format/notus_format.dart';

void main() {
  final doc = NotusDocument();
  // 使用插入、删除和格式化操作修改此文档
  doc.insert(0, 'Notus package provides rich text document model for Zefyr editor');
  doc.format(0, 5, NotusAttribute.bold); // 将第一个单词加粗。
  doc.format(0, 0, NotusAttribute.h1); // 将第一行设置为标题。
  doc.delete(23, 10); // 删除 "rich text " 段落。

  // 收集此文档中第1个字符处的所有样式属性。
  doc.collectStyle(1, 0); // 返回的样式将包括 "bold" 和 "h1"。

  // 监听应用于此文档的所有更改。
  doc.changes.listen((change) {
    print(change);
  });

  // 释放由该文档分配的资源，例如关闭 "changes" 流。
  // 文档关闭后不能再进行修改。
  doc.close();
}

完整示例 Demo

以下是一个完整的Flutter应用程序示例，演示如何使用 notus_format 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Notus Format Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late NotusDocument _document;

  @override
  void initState() {
    super.initState();
    _document = NotusDocument();
    _initializeDocument();
  }

  void _initializeDocument() {
    _document.insert(0, '欢迎使用 Notus 格式化插件！\n');
    _document.format(0, 4, NotusAttribute.bold);
    _document.format(0, 0, NotusAttribute.h1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Notus Format 示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ListView(
          children: [
            Text(_document.toPlainText()),
          ],
        ),
      ),
    );
  }
}

此示例创建了一个简单的Flutter应用程序，展示了如何使用 notus_format 插件来格式化和显示文本。您可以根据需要扩展此示例，添加更多的格式化功能和用户交互。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用notus_format插件来进行文本格式化的示例代码。notus_format是一个强大的文本格式化库，它允许你在Flutter应用中轻松创建和渲染富文本。

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

dependencies:
  flutter:
    sdk: flutter
  notus_format: ^最新版本号  # 请替换为最新的版本号

然后，运行flutter pub get来安装依赖。

接下来，是一个简单的示例，展示如何使用notus_format来创建和显示格式化的文本：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Notus Format Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 创建一个Document对象，它包含了所有的文本和格式信息
    final document = Document()
      ..add(Paragraph()
        ..add(Text('这是一个')
          ..style = TextStyle()
            ..color = Colors.black
            ..fontSize = 16)
        ..add(Text('粗体')
          ..style = TextStyle()
            ..color = Colors.blue
            ..fontWeight = FontWeight.bold)
        ..add(Text('和')
          ..style = TextStyle()
            ..color = Colors.black
            ..fontSize = 16)
        ..add(Text('斜体')
          ..style = TextStyle()
            ..color = Colors.red
            ..fontStyle = FontStyle.italic))
      ..add(Paragraph()
        ..add(Text('这是一个带有下划线的文本。')
          ..style = TextStyle()
            ..color = Colors.green
            ..decoration = TextDecoration.underline));

    // 使用NotusTextWidget来渲染Document
    return Scaffold(
      appBar: AppBar(
        title: Text('Notus Format Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: NotusTextWidget(
          document: document,
          style: TextStyle(
            height: 1.5,
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们：

  1. 创建了一个Document对象，它代表整个富文本内容。
  2. 使用Paragraph对象来表示段落，并使用Text对象来表示段落中的文本片段。
  3. 为每个Text对象设置了不同的样式，包括颜色、字体大小、字体粗细、字体样式和文本装饰（如下划线）。
  4. 使用NotusTextWidget来渲染这个Document。

运行这个应用，你将看到一个包含格式化文本的界面，其中“粗体”文本以蓝色粗体显示，“斜体”文本以红色斜体显示，而“带有下划线的文本”则以绿色下划线显示。

这个示例展示了notus_format的基本用法，你可以根据需要进一步自定义和扩展你的富文本内容。

回到顶部