Flutter文本解析插件leoml_parser的使用

Flutter 文本解析插件 leoml_parser 的使用

LeoML 解析器是一个软件包，为客户端应用程序提供了处理 LeoML 文档的接口。它会检查并验证 LeoML 文档的格式。

目录

1. 问题描述和目标
2. LeoML
3. 特性
4. 使用方法
5. 附加信息

问题描述和目标

问题描述

网页应用或移动应用经常包含长结构化的文本，例如博客文章或文章。

在这种情况下，通常只在需要时才将它们传递给客户端，而不是一开始就传递。

此外，这些文本通常非常复杂。它们由标题、段落、图片、引用等组成。更复杂的是，每个作者都有自己的风格化工具来使文本可视化（例如，突出某些段落）。

HTML 或 Markdown 是众所周知的标记语言，可以解决这个问题。然而，两者都有以下缺点：它们没有充分利用 Flutter 的能力。

虽然你可以使用 flutter_html 来适应作者的需求，但 HTML 和 CSS 并不是 Flutter。

同样，flutter_markdown 包也没有提供 Flutter 所具有的无限可能性来视觉化地样式化文本。

目标

我们的目标是设计一种标记语言，能够以易于人类和机器阅读的方式组织和格式化文本。这种标记语言被称为 ‘LeoML’。

LeoML 文档的各个部分将通过 LeoML 解析器分配给单独设计的小部件。这确保了每段文本都有其独特的外观，并且可以利用 Flutter 的所有功能。

LeoML

LeoML 是一种用于结构化和格式化文本和其他数据的机器可读标记语言，使用 JSON 格式来组织内容。LeoML 使用模板来结构化文本。

版本 1.0.0 的 LeoML 知道两种类型的模板：

1. 博客
2. 文章

如果你不知道 LeoML 是如何构建的，可以在 这里 查看详细的文档。

特性

• 定义单个小部件或使用默认小部件来处理每个对象。
• 将 LeoML 文档解析为一组小部件。
• 将 LeoML 文档解析为一个列。

使用方法

如何使用博客模板创建博客文章

提示：如果 LeoML 文档中提到的对象没有对应的自定义小部件注入，则将使用默认小部件。

创建一个不包含自定义小部件构建器注入的博客实例

final blog = Blog();

创建一个包含自定义小部件构建器注入的博客实例

final headlineBuilder = MyHeadlineBuilder();
final openingBuilder = MyOpeningBuilder();
final subHeadlineBuilder = MySubHeadlineBuilder();
final sectionBuilder = MySectionBuilder();

final blogTemplate = Blog(
  headlineBuilder: headlineBuilder,
  openingBuilder: openingBuilder,
  subHeadlineBuilder: subHeadlineBuilder,
  sectionBuilder: sectionBuilder,
);

实例化 LeoML 解析器

final leoMLDocumentParser = LeoMLDocumentParser();

解析 LeoML 文档

const leoMLDocument = '[...]';

// 第一种选项：将 LeoML 文档解析为一个包含小部件的列
final column = leoMLDocumentParser.parseToColumn(leoMLDocument: leoMLDocument, template: blogTemplate);

// 第二种选项：将 LeoML 文档解析为一组小部件
final set = leoMLDocumentParser.parseToSet(leoMLDocument: leoMLDocument, template: blogTemplate);

完整示例

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

Column column = const Column();

Future<void> main() async {
  final blogTemplate = Blog(
    headlineBuilder: MyCustomHeadlineBuilder(),
  );
  final leoMLDocumentParser = LeoMLDocumentParser();
  column = await leoMLDocumentParser.parseToColumn(
    leoMLDocument: leoMLDocument,
    template: blogTemplate,
  );

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'LeoML Parser 示例',
      home: LeoMLParserExampleApp(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12.0),
              child: column,
            ),
          ),
        ),
      ),
    );
  }
}

class MyCustomHeadlineBuilder extends LeoMLWidgetBuilder {
  [@override](/user/override)
  Widget build({required Map object}) => MyCustomHeadline(object: object);
}

class MyCustomHeadline extends StatelessWidgetTemplate {
  const MyCustomHeadline({super.key, required super.object});

  [@override](/user/override)
  Widget build(BuildContext context) => Text(
    object['headline'],
    style: const TextStyle(
      color: Colors.green,
      fontSize: 44.0,
      fontWeight: FontWeight.bold,
    ),
  );

  [@override](/user/override)
  void validateObject() {
    if (object['headline'] is! String) {
      throw AtomicObjectIsNotStringException(
        subTagName: 'headline',
      );
    }
  }
}

const leoMLDocument = '['
    '{'
    ' "type": "blog"'
    '},'
    '{'
    ' "headline": "为什么植物对家庭有益？"'
    '},'
    '{'
    ' "opening": {'
    '   "text": "我们早就知道植物对我们健康有益，但它们具体做了什么呢？我们列出了10个原因说明为什么你应该在家里养植物。",'
    '   "imageURL": "https://upload.wikimedia.org/wikipedia/commons/a/a1/Houseplants_in_Michigan.jpg"'
    '}'
    '},'
    '{'
    ' "subHeadline": "植物能减轻压力"'
    '},'
    '{'
    ' "section": "研究表明，在家里养植物有助于减轻压力。绿色的颜色有镇静作用，所以待在绿色房间的人血压较低，感觉更加放松和快乐。"'
    '},'
    // 其他段落省略...
    ']';