CN111596948B

CN111596948B - 一种基于Flutter的文档处理方法和装置

Info

Publication number: CN111596948B
Application number: CN202010276025.XA
Authority: CN
Inventors: 吴丹; 李义新; 金修博
Original assignee: Beijing 58 Information Technology Co Ltd
Current assignee: Beijing 58 Information Technology Co Ltd
Priority date: 2020-04-09
Filing date: 2020-04-09
Publication date: 2021-07-16
Anticipated expiration: 2040-04-09
Also published as: CN111596948A

Abstract

本发明实施例提供了一种基于Flutter的文档处理方法及装置，应用于Flutter，通过Flutter获取包含样式参数的MarkDown文档，并遍历文档中的UI组件代码，根据样式参数，提取MarkDown文档的样式组件代码以及基础组件代码，并加载样式组件代码与基础组件代码，渲染针对MarkDown文档对应的UI界面，展示UI界面的预览效果，其中，样式参数中可以包括展示信息，该展示信息用于展示样式组件的代码，从而在Flutter对MarkDown文档进行显示处理的过程中，通过样式参数，可以快速地获取样式组件的代码并进行渲染展示，在后期工程维护的过程中，可以根据样式参数针对性地进行UI组件维护，有效提高了工程维护的效率，并且在展示UI组件对应的显示效果时，还展示UI组件对应的代码，显著提高了代码查找的效率。

Description

一种基于Flutter的文档处理方法和装置

技术领域

本发明涉及数据处理技术领域，特别是涉及一种基于Flutter的文档处理方法和一种基于Flutter的文档处理装置。

背景技术

MarkDown是一种轻量级标记语言，其允许开发人员使用易读写的方式对纯文本格式编写文档，生成的文档文档后缀为.md、.markdown。Flutter是谷歌提供的移动UI框架，可以快速在IOS和Android上构建高质量的原生用户界面。

随着应用程序的发展，应用程序中用到的UI(User Interface，用户界面)组件也越来越多。然而在通过Flutter对MarkDown文档进行处理的过程中，若需要显示某个组件样式或者对应的代码，则需要对样式进行截图，然后将所截取的图片放到工程文档中，并且将图片以引用的方式放到MarkDown文档中，从而一方面当需要嵌入组件或组件样式改变时，需要重新截图，工程维护效率低下，另一方面若开发人员想要查看组件对应的实现代码，需要到庞大的工程文档中进行查找，查找效率低下。

发明内容

本发明实施例提供了一种基于Flutter的文档处理方法，以解决现有技术中Flutter对MarkDown文档进行处理的过程中，文档中所涉及的UI组件维护效率低下，且无法快速查看对应组件代码的问题。

相应的，本发明实施例还提供了一种基于Flutter的文档处理装置，用以保证上述方法的实现及应用。

为了解决上述问题，本发明实施例公开了一种基于Flutter的文档处理方法，包括：

获取MarkDown文档，所述MarkDown文档包括UI组件代码与样式参数，所述样式参数包括展示信息；

根据所述样式参数，从所述UI组件代码中，提取所述MarkDown文档的样式组件代码以及基础组件代码；

加载所述样式组件代码与所述基础组件代码，渲染针对所述MarkDown文档的UI界面；

展示所述UI界面的预览效果，并基于所述展示信息展示所述样式组件代码。

可选地，所述Flutter包括渲染插件，所述加载所述样式组件代码与所述基础组件代码，渲染针对所述MarkDown文档对应的UI界面，包括：

将所述基础组件代码拼接成适配于所述Flutter的第一文本，以及将所述样式组件代码转换为适配于所述Flutter的第二文本；

对所述第一文本与所述第二文本进行拼接，生成兼容列表；

采用所述兼容列表，生成针对所述MarkDown文档的组件列表；

通过所述渲染插件渲染所述组件列表对应的UI界面。

可选地，所述样式参数包括路径信息，所述兼容列表包括文本信息，所述采用所述兼容列表，生成针对所述MarkDown文档的组件列表，包括：

在遍历所述兼容列表的过程中，当所述文本信息为所述第一文本时，则生成与所述第一文本对应的基础组件标识；

当所述文本信息为第二文本时，则获取与所述MarkDown文档匹配的配置文件，并从所述配置文件中提取与所述路径信息对应的样式组件标识；

将所述基础组件标识与所述样式组件标识组成所述组件列表。

可选地，所述样式参数包括显示效果信息，所述展示所述UI界面的预览效果，并基于所述展示信息展示所述样式组件代码，包括：

在所述UI界面中，展示与所述显示效果信息对应的预览效果；

以及当所述展示信息指示展示所述样式组件代码时，则确定当前UI界面中的目标UI控件，并获取所述目标UI控件对应的目标组件代码，展示所述目标组件代码。

可选地，所述根据所述样式参数，从所述UI组件代码中，提取所述MarkDown文档的样式组件代码以及基础组件代码，包括：

从所述UI组件代码中，将与所述样式参数匹配的UI组件代码作为所述样式组件代码；

将与所述样式参数不匹配的UI组件代码作为所述基础组件代码。

本发明实施例还公开了一种基于Flutter的文档处理装置，包括：

文档获取模块，用于获取MarkDown文档，所述MarkDown文档包括UI组件代码与样式参数，所述样式参数包括展示信息；

组件代码提取模块，用于根据所述样式参数，从所述UI组件代码中，提取所述MarkDown文档的样式组件代码以及基础组件代码；

UI界面渲染模块，用于加载所述样式组件代码与所述基础组件代码，渲染针对所述MarkDown文档的UI界面；

信息展示模块，用于展示所述UI界面的预览效果，并基于所述展示信息展示所述样式组件代码。

可选地，所述Flutter包括渲染插件，所述UI界面渲染模块包括：

文本生成子模块，用于将所述基础组件代码拼接成适配于所述Flutter的第一文本，以及将所述样式组件代码转换为适配于所述Flutter的第二文本；

兼容列表生成子模块，用于对所述第一文本与所述第二文本进行拼接，生成兼容列表；

组件列表生成子模块，用于采用所述兼容列表，生成针对所述MarkDown文档的组件列表；

UI界面渲染子模块，用于通过所述渲染插件渲染所述组件列表对应的UI界面。

可选地，所述样式参数包括路径信息，所述兼容列表包括文本信息，所述组件列表生成子模块具体用于：

可选地，所述组件代码提取模块具体用于：

本发明实施例还公开了一种装置，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述装置执行如上所述的一个或多个的方法。

本发明实施例还公开了一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行如上所述的一个或多个的方法。

本发明实施例包括以下优点：

在本发明实施例中，应用于Flutter，通过Flutter获取包含样式参数的MarkDown文档，并遍历文档中的UI组件代码，根据样式参数，提取MarkDown文档的样式组件代码以及基础组件代码，并加载样式组件代码与基础组件代码，渲染针对MarkDown文档对应的UI界面，展示UI界面的预览效果，其中，样式参数中可以包括展示信息，该展示信息可以用于展示样式组件的代码，从而在Flutter对MarkDown文档进行显示处理的过程中，通过样式参数，可以快速地获取样式组件的代码并进行渲染展示，在后期工程维护的过程中，可以根据样式参数针对性地进行UI组件维护，有效提高了工程维护的效率，并且在展示UI组件对应的显示效果时，还可以展示UI组件对应的代码，显著提高了代码查找的效率。

附图说明

图1是本发明的一种基于Flutter的文档处理方法实施例的步骤流程图；

图2是本发明的一种基于Flutter的文档处理装置实施例的结构框图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

Flutter是一个新的用于构建跨平台的移动终端应用程序的移动UI框架，可以快速在IOS和Android上构建高质量的原生用户界面。在Flutter中包含了支持MarkDown语法的插件Flutter_MarkDown，Flutter可以通过该插件将MarkDown文档转换为对应的UI组件，并展示UI组件对应的预览效果。

具体的，开发人员可以编写MarkDown文档，接着通过Flutter读取MarkDown文档中的内容，例如，读取MarkDown(data:‘markdown内容’)或者MarkDownBody(data:‘某一段markdown内容’)，然后Flutter_MarkDown可以将传入的内容转换为对应的组件，并在运行界面中，展示整个MarkDown文档的内容。然而，在该过程中，如果MarkDown需要显示某个组件样式或者对应的代码，需要对组件样式进行截图，并将图片放到工程中，同时将图片以引用的方式(远程或本地)嵌入到MarkDown中，当组件样式改变了或需要维护时，需要重新截图，大大降低了工程维护的效率。此外，若是想要查看组件的实现代码，则需要从庞大的代码中进行查找，不仅需要耗费大量的时间，还需要耗费工作人员的精力。

因此，本发明实施例的核心构思之一在于通过对MarkDown文档进行编写，在MarkDown文档中嵌入针对组件样式的样式参数，并配置与该样式参数对应的配置文件，从而当Flutter对MarkDown文档进行解析时，可以根据样式参数获取对应的组件代码，并展示UI组件对应的预览效果以及组件代码，实现了可以根据样式参数针对性地进行UI组件维护，有效提高了工程维护的效率，并且在展示UI组件对应的显示效果时，还可以展示UI组件对应的代码，显著提高了代码查找的效率。

参照图1，示出了本发明的一种基于Flutter的文档处理方法实施例的步骤流程图，具体可以包括如下步骤：

步骤101，获取MarkDown文档，所述MarkDown文档包括UI组件代码与样式参数，所述样式参数包括展示信息；

在本发明实施例中，开发人员可以在MarkDown文档中编写针对应用程序界面的内容，从而完成应用程序界面UI组件的实现代码编写。当完成MarkDown文档的代码编写后，可以通过Flutter对MarkDown文档进行解析，得到文档内容，并转换为对应的Flutter UI组件，以便展示对应的预览效果。

在具体实现中，可以在MarkDown文档中嵌入样式参数，样式参数可以为特定代码，通过该样式参数可以对MarkDown文档中涉及自定义的样式组件进行参数的界面配置。例如，样式参数可以包括样式组件的文件路径信息、样式组件的展示信息以及样式组件的显示效果信息等。

在一种示例中，样式参数可以如下所示：

其中，"demo"表示自定义的样式组件的文件路径信息。"code"标识样式组件是否展示组件对应的代码，默认为展示，通过该展示信息可以在预览效果展示的同时，对样式组件的代码进行展示，以便工作人员获取样式组件的代码，显著提高了代码查找的效率。"jump"表示跳转到二级界面显示组件效果，对于样式组件，可以展示于当前页面，也可以展示于跳转页面，当控件在当前页面时，用户可以对该样式组件进行局部的操作，从而页面可以展示对应的显示效果，如滑动等；当控件在全局界面时，可以根据用户的操作进行跳转，从而页面可以展示对应的界面显示跳转效果，例如，样式组件为展示在应用程序局部界面中的滑动控件，用户可以对该滑动控件进行操作，如滑动页面，也可以激活该控件，并跳转到另一页面等等

步骤102，根据所述样式参数，从所述UI组件代码中，提取所述MarkDown文档的样式组件代码以及基础组件代码；

在本发明实施例中，MarkDown文档中的UI组件代码可以包括样式组件代码以及基础组件代码等。其中，样式组件代码可以为开发人员在MarkDown文档中编写的自定义组件代码，基础组件代码可以为MarkDown文档中涉及应用程序界面基础功能的组件代码，例如，在应用程序界面中，样式组件可以为界面中开发人员设计的自定义控件，用于为用户提供自定义功能，基础组件可以为界面中提供基础功能的控件等等。

在具体实现中，在MarkDown文档中嵌入了针对样式组件的样式参数，则Flutter可以通过样式参数从UI组件代码中，将与样式参数匹配成功的UI组件代码作为样式组件代码，将与样式参数匹配失败的UI组件代码作为基础组件代码。具体的，Flutter可以通过Flutter_MarkDown从MarkDown文档的第一行代码开始遍历，当检测到样式参数时，则将与样式参数对于的组件代码作为样式组件代码，否则，则作为基础组件代码。

步骤103，加载所述样式组件代码与所述基础组件代码，渲染针对所述MarkDown文档的UI界面；

当确定了样式组件代码以及基础组件代码后，可以加载样式组件代码与基础组件代码，渲染针对MarkDown文档的UI界面，从而将MarkDown文档中的内容转换为对应FlutterUI组件，并进行展示。

在本发明的一种可选实施例中，Flutter中还可以包括渲染插件，可以将基础组件代码拼接成适配于Flutter的第一文本，以及将样式组件代码转换为适配于Flutter的第二文本，接着对第一文本与第二文本进行拼接，生成兼容列表，然后采用兼容列表，生成针对MarkDown文档的组件列表，并通过渲染插件渲染组件列表对应的UI界面。

Flutter通过Flutter_MarkDown对MarkDown文档进行内容解析，遍历每行组件代码，将不涉及样式参数的UI组件代码，作为基础组件代码，并对基础组件代码进行拼接，获得string(即获得第一文本)；将涉及样式参数的UI组件代码，作为样式组件代码，对样式组件代码对应的元数据放入Flutter的model(即获得第二文本)中。接着将解析出来的model与string进行拼接，得到兼容列表，如下表1所示：

String
	Model
String
	Model
String

表1

通过将MarkDown文档中的内容转换为适配于Flutter的兼容列表，有利于后续Flutter进行UI组件的转换。具体的，Flutter_MarkDown可以对兼容列表进行遍历，在遍历的过程中，若兼容列表中的文本信息为第一文本时，则生成与第一文本对应的基础组件标识；当文本信息为第二文本时，则获取与MarkDown文档匹配的配置文件，并从配置文件中，提取与样式参数中的路径信息对应的样式组件标识，然后Flutter_MarkDown可以将基础组件标识与样式组件标识进行拼接，得到针对MarkDown文档的组件列表，以便将该组件列表传输至渲染插件，进行UI界面渲染。

在一种示例中，在遍历兼容列表的过程中，若为string，则使用Flutter_MarkDown解析成对应的Widget；若为model，则通过样式参数中的路径信息，从配置文件中找到对应的样式Widget(即demo)，然后将所有的Widget拼接成组件列表，如下表2所示，从而将所有解析出来的组件拼接成listview的items。

Widget
	Demo1
Widget
	Demo2
Widget

表2

当生成组件列表后，可以将组件列表传给Flutter的Listview插件进行UI组件渲染，以便展示MarkDown文档的UI界面的预览效果。

步骤104，展示所述UI界面的预览效果，并基于所述展示信息展示所述样式组件代码。

当Flutter通过Listview插件渲染了与MarkDown文档对应的UI界面后，用户可以通过UI界面浏览MarkDown文档的组件的显示效果。并且，在展示组件的显示效果的同时，还可以根据展示信息展示样式组件的样式组件代码。

在一种示例中，样式参数包括显示效果信息以及展示信息，其中，显示效果信息可以为跳转到二级界面显示组件效果，则Flutter可以在UI界面中，展示与显示效果信息对应的预览效果，例如，样式组件为展示在应用程序局部界面中的滑动控件，用户可以对该滑动控件进行操作，如滑动页面，也可以激活该控件，并跳转到另一页面等等。

此外，展示信息可以表示是否对组件对应的代码进行展示，其默认值为“false”，则当展示信息为“true”，指示展示样式组件代码时，可以确定当前UI界面中的目标UI控件，并获取该目标UI控件对应的目标组件代码，从而展示该目标组件代码。可以理解的是，对于UI界面中的UI控件，其在MarkDown文档中均有对应的组件代码，从而在展示UI组件对应的显示效果时，还可以展示UI组件对应的代码，避免工作人员在庞大的代码中进行查找，显著提高了代码查找的效率。

需要说明的是，本发明实施例包括但不限于上述示例，可以理解的是，在本发明实施例的思想指导下，本领域技术人员可以根据实际情况进行设置，本发明对此不作限制。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

参照图2，示出了本发明的一种基于Flutter的文档处理装置实施例的结构框图，具体可以包括如下模块：

文档获取模块201，用于获取MarkDown文档，所述MarkDown文档包括UI组件代码与样式参数，所述样式参数包括展示信息；

组件代码提取模块202，用于根据所述样式参数，从所述UI组件代码中，提取所述MarkDown文档的样式组件代码以及基础组件代码；

UI界面渲染模块203，用于加载所述样式组件代码与所述基础组件代码，渲染针对所述MarkDown文档的UI界面；

信息展示模块204，用于展示所述UI界面的预览效果，并基于所述展示信息展示所述样式组件代码。

在本发明的一种可选实施例中，所述Flutter包括渲染插件，所述UI界面渲染模块203包括：

在本发明的一种可选实施例中，所述样式参数包括路径信息，所述兼容列表包括文本信息，所述组件列表生成子模块具体用于：

在本发明的一种可选实施例中，所述样式参数包括显示效果信息，所述展示所述UI界面的预览效果，并基于所述展示信息展示所述样式组件代码，包括：

在本发明的一种可选实施例中，所述组件代码提取模块202具体用于：

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本发明实施例还提供了一种装置，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述装置执行本发明实施例所述的方法。

本发明实施例还提供了一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行本发明实施例所述的方法。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器、EEPROM、Flash以及eMMC等)上实施的计算机程序产品的形式。

本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本发明所提供的一种基于Flutter的文档处理方法和一种基于Flutter的文档处理装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims

1.一种基于Flutter的文档处理方法，其特征在于，包括：

获取MarkDown文档，所述MarkDown文档包括UI组件代码与样式参数，所述样式参数为对样式组件进行参数的界面配置的特定代码，其中，所述样式参数包括展示信息；

展示所述UI界面的预览效果，并基于所述展示信息展示所述样式组件代码；

其中，所述加载所述样式组件代码与所述基础组件代码，渲染针对所述MarkDown文档的UI界面，包括：

对所述第一文本与所述第二文本进行拼接，生成兼容列表；

采用所述兼容列表，生成针对所述MarkDown文档的组件列表；

渲染所述组件列表对应的UI界面。

2.根据权利要求1所述的方法，其特征在于，所述Flutter包括渲染插件，所述渲染所述组件列表对应的UI界面，包括：

通过所述渲染插件渲染所述组件列表对应的UI界面。

3.根据权利要求2所述的方法，其特征在于，所述样式参数包括路径信息，所述兼容列表包括文本信息，所述采用所述兼容列表，生成针对所述MarkDown文档的组件列表，包括：

4.根据权利要求1所述的方法，其特征在于，所述样式参数包括显示效果信息，所述展示所述UI界面的预览效果，并基于所述展示信息展示所述样式组件代码，包括：

5.根据权利要求1所述的方法，其特征在于，所述根据所述样式参数，从所述UI组件代码中，提取所述MarkDown文档的样式组件代码以及基础组件代码，包括：

6.一种基于Flutter的文档处理装置，其特征在于，包括：

文档获取模块，用于获取MarkDown文档，所述MarkDown文档包括UI组件代码与样式参数，所述样式参数为对样式组件进行参数的界面配置的特定代码，其中，所述样式参数包括展示信息；

信息展示模块，用于展示所述UI界面的预览效果，并基于所述展示信息展示所述样式组件代码；

其中，所述UI界面渲染模块包括：

UI界面渲染子模块，用于渲染所述组件列表对应的UI界面。

7.根据权利要求6所述的装置，其特征在于，所述Flutter包括渲染插件，所述UI界面渲染子模块具体用于通过所述渲染插件渲染所述组件列表对应的UI界面。

8.根据权利要求7所述的装置，其特征在于，所述样式参数包括路径信息，所述兼容列表包括文本信息，所述组件列表生成子模块具体用于：

9.根据权利要求6所述的装置，其特征在于，所述样式参数包括显示效果信息，所述展示所述UI界面的预览效果，并基于所述展示信息展示所述样式组件代码，包括：

10.根据权利要求6所述的装置，其特征在于，所述组件代码提取模块具体用于：

11.一种电子设备，其特征在于，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述电子设备执行如权利要求1-5所述的一个或多个的方法。

12.一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行如权利要求1-5所述的一个或多个的方法。