CN112817595A - 界面渲染方法、装置、存储介质及电子设备 - Google Patents

Abstract

本申请公开了一种界面渲染方法、装置、存储介质及电子设备，首先获取待渲染的虚拟文档对象模型树，然后将虚拟文档对象模型树转换为Flutter的渲染树，并根据渲染树创建对应预设布局库的布局视图树，以及通过预设布局库获取对应布局视图树的布局参数，最后根据该布局参数，通过Flutter对渲染树进行绘制，得到虚拟文档对象模型树的对应界面。以此，本申请通过引入第三方的布局库，使得Flutter能够完成虚拟文档对象模型树的渲染，增加了Flutter的渲染能力，使得其使用范围得以扩大，从而支持JS应用生态。

Description

界面渲染方法、装置、存储介质及电子设备

技术领域

本申请涉及计算机技术领域，具体涉及一种界面渲染方法、装置、存储介质及电子设备。

背景技术

Flutter是谷歌开源的跨平台UI框架，其具有自己的渲染引擎，当采用符合Flutter编程规范的代码完成界面的编写后，可利用其自带的渲染引擎进行渲染。Flutter自带渲染引擎的特点使其具备跨平台的能力，只要写一份代码，就可以构建出安卓应用、IOS应用以及网页应用，并达到和原生应用一致的使用体验。然而，作为一款新的产品，Flutter对现有技术的支持有限，限制了其使用范围。

发明内容

本申请提供了一种定位标签及导航方法，能够增强Flutter的渲染能力，扩大Flutter的使用范围。

第一方面，本申请提供一种界面渲染方法，包括：

获取待渲染的虚拟文档对象模型树；

将所述虚拟文档对象模型树转换为Flutter的渲染树；

根据所述渲染树创建对应预设布局库的布局视图树，并通过所述预设布局库获取对应所述布局视图树的布局参数；

根据所述布局参数，通过Flutter对所述渲染树进行绘制，得到所述虚拟文档对象模型树的对应界面。

第二方面，本申请还提供一种界面渲染装置，包括：

获取模块，用于获取待渲染的虚拟文档对象模型树；

转换模块，用于将所述虚拟文档对象模型树转换为Flutter的渲染树；

布局模块，用于根据所述渲染树创建对应预设布局库的布局视图树，并通过所述预设布局库获取对应所述布局视图树的布局参数；

绘制模块，用于根据所述布局参数，通过Flutter对所述渲染树进行绘制，得到所述虚拟文档对象模型树的对应界面。

第三方面，本申请还提供一种存储介质，其上存储有计算机程序，当所述计算机程序被电子设备加载时执行如本申请提供的任一界面渲染方法。

第四发明，本申请还提供一种电子设备，包括处理器和存储器，所述存储器存储有计算机程序，所述处理器通过加载所述计算机程序执行如本申请提供的任一界面渲染方法。

本申请中，首先获取待渲染的虚拟文档对象模型树，然后将虚拟文档对象模型树转换为Flutter的渲染树，并根据渲染树创建对应预设布局库的布局视图树，以及通过预设布局库获取对应布局视图树的布局参数，最后根据该布局参数，通过Flutter对渲染树进行绘制，得到虚拟文档对象模型树的对应界面。以此，本申请通过引入第三方的布局库，使得Flutter能够完成虚拟文档对象模型树的渲染，增加了Flutter的渲染能力，使得其使用范围得以扩大，从而支持JS应用生态。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的界面渲染方法的一流程示意图。

图2是本申请实施例中虚拟文档对象模型树的结构示意图。

图3是Flutter对渲染树进行绘制的示意图。

图4是本申请实施例中将虚拟文档对象模型树转换为渲染树的示意图。

图5是本申请实施例提供的界面渲染方法的另一流程示意图。

图6是本申请实施例提供的界面渲染装置的结构示意图。

图7是本申请实施例提供的电子设备的结构示意图。

具体实施方式

应当说明的是，本申请中的术语“第一”、“第二”和“第三”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或模块的过程、方法、系统、产品或设备没有限定于已列出的步骤或模块，而是某些实施例还包括没有列出的步骤或模块，或某些实施例还包括对于这些过程、方法、产品或设备固有的其它步骤或模块。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

本申请实施例提供一种界面渲染方法、界面渲染装置、存储介质及电子设备，其中界面渲染方法的执行主体可以是本申请实施例提供的界面渲染装置，或者集成了该界面渲染装置的电子设备，其中该界面渲染装置可以采用硬件或者软件的方式实现。其中，电子设备可以是智能手机、平板电脑、掌上电脑、笔记本电脑、或者台式电脑等配置有处理器而具有数据处理能力的设备。

请参照图1，图1为本申请实施例提供的界面渲染方法的流程示意图，如图1所示，本申请实施例提供的界面渲染方法的流程可以如下：

在110中，获取待渲染的虚拟文档对象模型树。

应当说明的是，真实文档对象模型树是W3C(World Wide Web Consortium，万维网联盟)制定的标准接口规范，是一种处理HTML(Hyper Text Markup Language，超文本标记语音)和XML(eXtensible Markup Language，可扩展标记语音)文件的标准API。真实文档对象模型树将文档作为一个树形结构，真实文档对象模型树的每个节点表示一个HTML标签或标签内的文本项。真实文档对象模型树的树形结构精确地描述了HTML文档中标签间的相互关联性，对HTML文档的处理可以通过对真实文档对象模型树的操作实现。JavaScript(以下简称为JS)引擎可以提供真实文档对象模型树暴露接口供JS调用，来方便JS操作文档对象模型树。但是，出于对执行成本的考虑，本申请中并不直接对真实文档对象模型树进行操作，而是对虚拟文档对象模型树进行操作，以避免直接操作真实文档模型对象树时大量无谓的计算量。其中，虚拟文档对象模型树采用JS对象模拟真实文档对象模型树的节点。比如，请参照图2，多个JS对象构成了一虚拟文档对象模型树。

本申请实施例中，可以从JS引擎获取渲染指令，该渲染指令携带了待渲染的虚拟文档对象模型树。比如，JS引擎可以为被设计用来提高JS代码执行性能JSV8引擎。

在120中，将虚拟文档对象模型树转换为Flutter的渲染树。

Flutter是谷歌开源的跨平台UI框架，其具有自己的渲染引擎，当采用符合Flutter编程规范的代码完成界面的编写后，可利用其自带的渲染引擎进行渲染。

应当说明的是，请参照图3，Flutter的布局系统是基于渲染树的，其渲染过程分为两个阶段。在第一个阶段中，Flutter自顶向下以递归地方式沿着渲染树把边界约束传递给渲染树上的每一个节点。它为父节点提供了一种方式来调节/控制子节点的尺寸，并根据需要更新这些约束。换句话说，这是负责传播约束信息的阶段，让每个节点知道其最大/最小值。

完成边界约束的传递后，第二阶段开始。这次是自底向上，让每个子节点在边界约束下计算其最终的大小并把结果传回父节点。父级收集所有子级的大小，然后使用此信息将每个子级正确定位在自己的布局系统中。这个阶段负责确定每个节点的布局参数，如大小和位置。

相应的，在本申请实施例中，在获取到待渲染的虚拟文档对象模型树之后，将该虚拟文档对象模型树转换为Flutter的渲染树，从而利用Flutter进行渲染。

在130中，根据渲染树创建对应预设布局库的布局视图树，并通过预设布局库获取对应布局视图树的布局参数。

应当说明的是，本申请在于引入第三方的布局库来扩展Flutter的布局能力，从而使得Flutter的使用范围得以扩大。此处对采用何种布局库作为预设布局库不作具体限制，可由本领域技术人员根据实际需要进行选择。

本申请实施例中由于需要利用预设布局库来进行渲染，而适于Flutter的渲染树并不能够直接利用预设布局库进行布局参数的计算，因此，本申请中需要先根据渲染树创建对应该预设布局库的布局视图树，然后，再通过该预设布局库计算得到对应布局视图树的布局参数，并将该对应布局视图树的布局参数作为渲染树的布局参数。

在140中，根据前述布局参数，通过Flutter对渲染树进行绘制，得到虚拟文档对象模型树的对应界面。

如上，在获得渲染树的布局参数之后，即通过Flutter根据该布局参数对渲染树进行绘制，从而得到虚拟文档对象模型树的对应界面，至此，即利用Flutter完成了对虚拟文档对象模型树的渲染。

由上可知，本申请中，首先获取待渲染的虚拟文档对象模型树，然后将虚拟文档对象模型树转换为Flutter的渲染树，并根据渲染树创建对应预设布局库的布局视图树，以及通过预设布局库获取对应布局视图树的布局参数，最后根据该布局参数，通过Flutter对渲染树进行绘制，得到虚拟文档对象模型树的对应界面。以此，本申请通过引入第三方的布局库，使得Flutter能够完成虚拟文档对象模型树的渲染，增加了Flutter的渲染能力，使得其使用范围得以扩大，从而支持JS应用生态。

可选地，在一实施例中，将虚拟文档对象模型树转换为Flutter的渲染树，包括：

(1)获取虚拟文档对象模型树中的每一JS对象对应的Flutter组件；

(2)将每一Flutter组件封装为对应预设布局库的渲染对象，得到多个渲染对象；

(3)根据多个渲染对象创建对应虚拟文档对象模型树的渲染树。

如上所述，为了利用Flutter对虚拟文档对象模型树进行渲染，需要将虚拟文档对象模型树转换为适于Flutter的渲染树，本实施例进一步提供一个可选地虚拟文档对象模型树至渲染树的转换方案。

可以理解的是，在本申请实施例中，虚拟文档对象模型树由多个JS对象组成，对于每一JS对象，需要将其转换为对应的Flutter组件。因此，对于虚拟文档对象模型树中的每一JS对象，获取与该JS对象对应的Flutter组件，也即是获取与该JS对象实现相同功能的Flutter组件。比如，虚拟文档对象模型树中的一JS对象在于实现文本对齐功能，则需要获取Flutter中同样实现文本对齐功能的Flutter组件。

如上，虚拟文档对象模型树中存在多少个JS对象，将相应获取到相同数量的Flutter组件，比如虚拟文档对象模型树中存在9个JS对象，则相应获取到与这9个JS对象分别对应的9个Flutter组件。

此外，本申请中在于引入第三方的预设布局库来扩展Flutter的布局能力，因此，本申请在获取到虚拟文档模型树中每一JS对象对应的Flutter组件之后，对于每一Flutter组件，利用Flutter的自定义布局能力，将其封装为对应预设布局库的自定义的渲染对象，也即符合预设布局库规范的渲染对象，由此得到多个渲染对象。

如上，在封装得到多个渲染对象之后，即可根据这多个渲染对象创建对应虚拟文档对象模型树的渲染树，即根据封装得到的多个渲染对象创建与虚拟文档对象模型树结构相同的渲染树。

示例性地，在本申请实施例中，JS对象包括JS组件和CSS(Cascading StyleSheets，层叠样式表)样式。比如，对于设定元素宽度的CSS样式“width”，与其对应的Flutter组件为“ConstrainedBox”、“LimitedBox”等；对于设定元素内容可滚动的CSS样式“overflowauto”，与其对应的Flutter组件为“SingleChildScrollView”等；对于纯文本内容的JS组件“text”，与其对应的Flutter组件为“text”，等等。

当JS对象包括CSS样式时，选择的预设布局库需要支持CSS布局标准，以此为约束，可由本领域技术人员根据实际需要选择合适的布局库作为预设布局库。比如，本申请实施例中，选用Yoga布局库作为预设布局库，Yoga布局库是脸书开源的一个跨平台的且支持CSS样式的布局库，并且在持续的维护升级中。

比如，假设JS对象包括JS组件和CSS样式，且预设布局库为Yoga库，将封装的渲染对象记为RY渲染对象，请参照图4，获取到的虚拟文档对象模型树包括由上至下的9个节点，分别为(按照由上至下，由左至右的顺序)：“div”容器节点、“text”叶子节点、“stack”容器节点、“div”容器节点、“div”容器节点、“input”叶子节点、“text”叶子节点、“switch”叶子节点、“image”叶子节点以及“text”叶子节点。

转换后的渲染树同样包括由上至下的9个节点，分别为(按照由上至下，由左至右的顺序)：RY容器节点，RY“text”叶子节点、RY“stack”容器节点、RY容器节点、RY容器节点、RY“button”叶子节点、RY“text”叶子节点、RY“switch”叶子节点、RY“image”叶子节点以及RY“text”叶子节点。

可选地，在一实施例中，根据渲染树创建对应预设布局库的布局视图树，包括：

根据多个渲染对象创建对应预设布局库的布局视图树。

如上，本申请在于利用第三方的预设布局库进行渲染，而适于Flutter渲染树并不能直接采用预设布局库进行渲染，需要根据渲染树创建对应的预设布局库的布局视图树。

本申请实施例中，由于封装的渲染对象是符合预设布局库的，因此，本申请中直接根据封装得到的多个渲染对象创建对应预设布局库的布局视图树。

比如，在采用Yoga布局库作为预设布局库时，将与虚拟文档对象模型树中JS对象对应的Flutter组件封装为RY渲染对象，本申请中除了根据封装的RY渲染对象创建渲染树之外，还根据封装的RY渲染对象创建布局视图树，即Yoga树。

可选地，在一实施例中，通过预设布局库获取对应布局视图树的布局参数，包括：

(1)通过预设布局库获取布局视图树中的每一渲染对象的布局参数；

根据前述布局参数，通过Flutter对渲染树进行绘制，得到虚拟文档对象模型树的对应界面，包括：

(2)根据每一渲染对象的布局参数，通过Flutter对每一渲染对象封装的Flutter组件进行绘制，由绘制得到的多个Flutter组件构成虚拟文档对象模型树的对应界面。

如上所述，本申请在创建渲染树时，都是由符合预设布局库规范的渲染对象封装的，本申请中，对于每一渲染对象，调用该渲染对象的布局函数，通过该布局函数调用预设布局库计算该渲染对象的布局参数，并返回给该渲染对象。如此，可通过预设布局库获取到布局视图树中每一渲染对象的布局参数。之后，根据每一渲染对象的布局参数，通过Flutter对每一渲染对象封装的Flutter组件进行绘制，从而由绘制而得到多个Flutter组件构成虚拟文档对象模型树的对应界面，至此，完成对虚拟文档对象模型树的渲染。

应当说明的是，当预设布局库与Flutter采用不同的编程规范时，需要通过布局函数对预设布局库进行跨语言调用，比如，Flutter采用Dart语言实现，而预设布局库采用C++语言编写，则对于一个渲染对象，该渲染对象的布局函数需要通过Dart跨语言调用C++的方式实现对预设布局库的调用。

可选地，在一实施例中，本申请提供的界面渲染方法还包括：

对预设布局库进行编程规范的转换，使得预设布局库符合Flutter的编程规范。

为减少跨语言调用的性能开销，本申请中预先对预设布局库进行编程规范的转换，以此来提高Flutter的渲染效率。

其中，对预设布局库进行编程规范的转换，使得预设布局库符合Flutter的编程规范。

比如，假设选取Yoga布局库为预设布局库，由于Yoga布局库采用C++编程规范，而Flutter采用Dart编程规范，Flutter需要对Yoga布局库进行跨语言调用，为减少跨语言调用的性能开销，可采用Dart语言对Yoga布局库进行重写，使得其符合Flutter的编程规范。

请参照图5，图5为本申请实施例提供的界面渲染方法的另一流程示意图，本申请实施例以Yoga布局库为预设布局库进行说明，如图5所示，该界面渲染方法可以包括：

在210中，从JSV8引擎获取渲染指令，该渲染指令携带有待渲染的虚拟文档对象模型树。

应当说明的是，真实文档对象模型树是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。真实文档对象模型树将文档作为一个树形结构，真实文档对象模型树的每个节点表示一个HTML标签或标签内的文本项。真实文档对象模型树的树形结构精确地描述了HTML文档中标签间的相互关联性，对HTML文档的处理可以通过对真实文档对象模型树的操作实现。JavaScript(以下简称为JS)引擎可以提供真实文档对象模型树暴露接口供JS调用，来方便JS操作文档对象模型树。但是，出于对执行成本的考虑，本申请中并不直接对真实文档对象模型树进行操作，而是对虚拟文档对象模型树进行操作，以避免直接操作真实文档模型对象树时大量无谓的计算量。其中，虚拟文档对象模型树采用JS对象模拟真实文档对象模型树的节点。比如，请参照图2，多个JS对象构成了一虚拟文档对象模型树。

本申请实施例中，JS引擎发送渲染指令到Flutter，该渲染指令携带了待渲染的虚拟文档对象模型树。其中，JS引擎为被设计用来提高JS代码执行性能JSV8引擎。

在220中，将虚拟文档对象模型树转换为Flutter的渲染树。

Flutter是谷歌开源的跨平台UI框架，其具有自己的渲染引擎，当采用符合Flutter编程规范的代码完成界面的编写后，可利用其自带的渲染引擎进行渲染。

应当说明的是，请参照图3，Flutter的布局系统是基于渲染树的，其渲染过程分为两个阶段。在第一个阶段中，Flutter自顶向下以递归地方式沿着渲染树把边界约束传递给渲染树上的每一个节点。它为父节点提供了一种方式来调节/控制子节点的尺寸，并根据需要更新这些约束。换句话说，这是负责传播约束信息的阶段，让每个节点知道其最大/最小值。

完成边界约束的传递后，第二阶段开始。这次是自底向上，让每个子节点在边界约束下计算其最终的大小并把结果传回父节点。父级收集所有子级的大小，然后使用此信息将每个子级正确定位在自己的布局系统中。这个阶段负责确定每个节点的布局参数，包括大小和位置。

相应的，在本申请实施例中，在获取到待渲染的虚拟文档对象模型树之后，将该虚拟文档对象模型树转换为Flutter的渲染树，从而利用Flutter进行渲染。

如上所述，为了利用Flutter对虚拟文档对象模型树进行渲染，需要将虚拟文档对象模型树转换为适于Flutter的渲染树。

可以理解的是，在本申请实施例中，虚拟文档对象模型树由多个JS对象组成，对于每一JS对象，需要将其转换为对应的Flutter组件。因此，对于虚拟文档对象模型树中的每一JS对象，获取与该JS对象对应的Flutter组件，也即是获取与该JS对象实现相同功能的Flutter组件。比如，虚拟文档对象模型树中的一JS对象在于实现文本对齐功能，则需要获取Flutter中同样实现文本对齐功能的Flutter组件。

如上，虚拟文档对象模型树中存在多少个JS对象，将相应获取到相同数量的Flutter组件，比如虚拟文档对象模型树中存在9个JS对象，则相应获取到与这9个JS对象分别对应的9个Flutter组件。

此外，本申请中在于引入第三方的预设布局库来扩展Flutter的布局能力，因此，本申请在获取到虚拟文档模型树中每一JS对象对应的Flutter组件之后，对于每一Flutter组件，利用Flutter的自定义布局能力，将其封装为对应预设布局库的自定义的渲染对象，也即符合预设布局库规范的渲染对象，由此得到多个渲染对象。

如上，在封装得到多个渲染对象之后，即可根据这多个渲染对象创建对应虚拟文档对象模型树的渲染树，即根据封装得到的多个渲染对象创建与虚拟文档对象模型树结构相同的渲染树。

示例性地，在本申请实施例中，JS对象包括JS组件和CSS(Cascading StyleSheets，层叠样式表)样式。比如，对于设定元素宽度的CSS样式“width”，与其对应的Flutter组件为“ConstrainedBox”、“LimitedBox”等；对于设定元素内容可滚动的CSS样式“overflowauto”，与其对应的Flutter组件为“SingleChildScrollView”等；对于纯文本内容的JS组件“text”，与其对应的Flutter组件为“text”，等等。

当JS对象包括CSS样式时，选择的预设布局库需要支持CSS布局标准，以此为约束，可由本领域技术人员根据实际需要选择合适的布局库作为预设布局库。比如，本申请实施例中，选用Yoga布局库作为预设布局库，Yoga布局库是脸书开源的一个跨平台的且支持CSS样式的布局库，并且在持续的维护升级中。

比如，假设JS对象包括JS组件和CSS样式，且预设布局库为Yoga库，将封装的渲染对象记为RY渲染对象，请参照图4，获取到的虚拟文档对象模型树包括由上至下的9个节点，分别为(按照由上至下，由左至右的顺序)：“div”容器节点、“text”叶子节点、“stack”容器节点、“div”容器节点、“div”容器节点、“input”叶子节点、“text”叶子节点、“switch”叶子节点、“image”叶子节点以及“text”叶子节点。

转换后的渲染树同样包括由上至下的9个节点，分别为(按照由上至下，由左至右的顺序)：RY容器节点，RY“text”叶子节点、RY“stack”容器节点、RY容器节点、RY容器节点、RY“button”叶子节点、RY“text”叶子节点、RY“switch”叶子节点、RY“image”叶子节点以及RY“text”叶子节点。

在230中，根据渲染树创建对应Yoga布局库的Yoga树。

应当说明的是，本申请在于引入第三方的布局库来扩展Flutter的布局能力，从而使得Flutter的使用范围得以扩大。本申请中选用Yoga布局库来扩展Flutter的布局能力，Yoga布局库是脸书开源的一个跨平台的且支持CSS样式的布局库，并且在持续的维护升级中。

本申请实施例中由于需要利用Yoga布局库来进行渲染，而适于Flutter的渲染树并不能够直接利用Yoga布局库进行布局参数的计算，因此，本申请中需要先根据渲染树创建对应该Yoga布局库的Yoga树。

在240中，通过Yoga布局库计算Yoga树的布局参数。

在250中，将Yoga布局库计算得到的布局参数返回Flutter。

其中，通过Yoga布局库计算得到对应Yoga树的布局参数，并将该对应布局视图树的布局参数作为渲染树的布局参数，返回至Flutter。

在260中，根据Yoga布局库返回的布局参数，通过Flutter对渲染树进行绘制，得到虚拟文档对象模型树的对应界面。

在获得Yoga布局库返回的布局参数之后，通过Flutter根据该布局参数对渲染树进行绘制，从而得到虚拟文档对象模型树的对应界面，至此，即利用Flutter完成了对虚拟文档对象模型树的渲染。

在一实施例中，还提供了一种界面渲染装置。请参照图6，图6为本申请实施例提供的界面渲染装置300的结构示意图。其中该界面渲染装置300应用于电子设备，该界面渲染装置包括获取模块310、转换模块320、布局模块330以及绘制模块340，如下：

获取模块310，用于获取待渲染的虚拟文档对象模型树；

转换模块320，用于将虚拟文档对象模型树转换为Flutter的渲染树；

布局模块330，用于根据渲染树创建对应预设布局库的布局视图树，并通过预设布局库获取对应布局视图树的布局参数；

绘制模块340，用于根据前述布局参数，通过Flutter对渲染树进行绘制，得到虚拟文档对象模型树的对应界面。

可选地，在一实施例中，在将虚拟文档对象模型树转换为Flutter的渲染树时，转换模块320用于：

获取虚拟文档对象模型树中的每一JS对象对应的Flutter组件；

将每一Flutter组件封装为对应预设布局库的渲染对象，得到多个渲染对象；

根据多个渲染对象创建对应虚拟文档对象模型树的渲染树。

可选地，在一实施例中，在根据渲染树创建对应预设布局库的布局视图树时，布局模块330用于：

根据多个渲染对象创建对应预设布局库的布局视图树。

可选地，在一实施例中，在通过预设布局库获取对应布局视图树的布局参数时，布局模块330：

通过预设布局库获取布局视图树中的每一渲染对象的布局参数；

在根据前述布局参数，通过Flutter对渲染树进行绘制，生成虚拟文档对象模型树的对应界面时，绘制模块340用于：

根据每一渲染对象的布局参数，通过Flutter对每一渲染对象封装的Flutter组件进行绘制，由绘制得到的多个Flutter组件构成虚拟文档对象模型树的对应界面。

可选地，在一实施例中，JS对象包括JS组件和CSS样式。

可选地，在一实施例中，预设布局库包括Yoga布局库。

可选地，在一实施例中，本申请提供的界面渲染装置还包括规范模块，用于对预设布局库进行编程规范的转换，使得预设布局库符合Flutter的编程规范。

具体实施时，以上各个模块可以作为独立的实体实现，也可以进行任意组合，作为同一或若干个实体来实现，以上各个单位的具体实施可参见前面的实施例，在此不再赘述。

在一实施例中，还提供一种电子设备，请参照图7，电子设备400包括处理器410和存储器420。其中，处理器410与存储器420电性连接。

处理器410是电子设备400的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或加载存储在存储器420内的计算机程序，以及调用存储在存储器420内的数据，执行电子设备400的各种功能并处理数据。

存储器420可用于存储软件程序以及模块，处理器410通过运行存储在存储器420的计算机程序以及模块，从而执行各种功能应用以及数据处理。存储器420可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的计算机程序(比如声音播放功能、通信播放功能等)等；存储数据区可存储根据电子设备的使用所创建的数据等。此外，存储器420可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器420还可以包括存储器控制器，以提供处理器410对存储器420的访问。

在本申请实施例中，电子设备400中的处理器410会按照如下的步骤，将一个或一个以上的计算机程序的进程对应的指令加载到存储器420中，并由处理器410运行存储在存储器420中的计算机程序，从而实现各种功能，如下：

获取待渲染的虚拟文档对象模型树；

将虚拟文档对象模型树转换为Flutter的渲染树；

根据渲染树创建对应预设布局库的布局视图树，并通过预设布局库获取对应布局视图树的布局参数；

根据前述布局参数，通过Flutter对渲染树进行绘制，得到虚拟文档对象模型树的对应界面。

可选地，在一实施例中，在将虚拟文档对象模型树转换为Flutter的渲染树时，处理器410用于执行：

获取虚拟文档对象模型树中的每一JS对象对应的Flutter组件；

将每一Flutter组件封装为对应预设布局库的渲染对象，得到多个渲染对象；

根据多个渲染对象创建对应虚拟文档对象模型树的渲染树。

可选地，在一实施例中，在根据渲染树创建对应预设布局库的布局视图树时，处理器410用于执行：

根据多个渲染对象创建对应预设布局库的布局视图树。

可选地，在一实施例中，在通过预设布局库获取对应布局视图树的布局参数时，处理器410用于执行：

通过预设布局库获取布局视图树中的每一渲染对象的布局参数；

在根据前述布局参数，通过Flutter对渲染树进行绘制，生成虚拟文档对象模型树的对应界面时，处理器410用于执行：

根据每一渲染对象的布局参数，通过Flutter对每一渲染对象封装的Flutter组件进行绘制，由绘制得到的多个Flutter组件构成虚拟文档对象模型树的对应界面。

可选地，在一实施例中，JS对象包括JS组件和CSS样式。

可选地，在一实施例中，预设布局库包括Yoga布局库。

可选地，在一实施例中，处理器410用于执行：

对预设布局库进行编程规范的转换，使得预设布局库符合Flutter的编程规范。

应当说明的是，本申请实施例提供的电子设备400与上文实施例中的界面渲染方法属于同一构思，其具体实现过程详见以上相关实施例，此处不再赘述。

本申请实施例还提供一种存储介质，所述存储介质存储有计算机程序，当所述计算机程序在电子设备上运行时，使得该电子设备执行上述任一实施例中的界面渲染方法，比如：

获取待渲染的虚拟文档对象模型树；

将虚拟文档对象模型树转换为Flutter的渲染树；

根据渲染树创建对应预设布局库的布局视图树，并通过预设布局库获取对应布局视图树的布局参数；

根据前述布局参数，通过Flutter对渲染树进行绘制，得到虚拟文档对象模型树的对应界面。

本申请实施例中，存储介质可以是磁碟、光盘、只读存储器(Read Only Memory，ROM，)或者随机存取器(Random Access Memory，RAM)等。需要说明的是，对本申请实施例的界面渲染方法而言，本领域普通测试人员可以理解实现本申请实施例的界面渲染方法的全部或部分流程，是可以通过计算机程序来控制相关的硬件来完成，所述计算机程序可存储于一计算机可读取存储介质中，如存储在电子设备的存储器中，并被该电子设备内的至少一个处理器执行，在执行过程中可包括如界面渲染方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储器、随机存取记忆体等。

对本申请实施例的界面渲染装置而言，其各功能模块可以集成在一个处理芯片中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中，所述存储介质譬如为只读存储器，磁盘或光盘等。

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

Claims (10)

1.一种界面渲染方法，其特征在于，包括：

获取待渲染的虚拟文档对象模型树；

将所述虚拟文档对象模型树转换为Flutter的渲染树；

根据所述渲染树创建对应预设布局库的布局视图树，并通过所述预设布局库获取对应所述布局视图树的布局参数；

根据所述布局参数，通过Flutter对所述渲染树进行绘制，得到所述虚拟文档对象模型树的对应界面。

2.如权利要求1所述的界面渲染方法，其特征在于，将所述虚拟文档对象模型树转换为Flutter的渲染树，包括：

获取所述虚拟文档对象模型树中的每一JS对象对应的Flutter组件；

将每一Flutter组件封装为对应所述预设布局库的渲染对象，得到多个渲染对象；

根据所述多个渲染对象创建对应所述虚拟文档对象模型树的渲染树。

3.如权利要求2所述的界面渲染方法，其特征在于，根据所述渲染树创建对应预设布局库的布局视图树，包括：

根据所述多个渲染对象创建对应所述预设布局库的所述布局视图树。

4.如权利要求3所述的界面渲染方法，其特征在于，通过所述预设布局库获取对应所述布局视图树的布局参数，包括：

通过所述预设布局库获取所述布局视图树中的每一渲染对象的布局参数；

根据所述布局参数，通过Flutter对所述渲染树进行绘制，生成所述虚拟文档对象模型树的对应界面，包括：

根据每一渲染对象的布局参数，通过Flutter对每一渲染对象封装的Flutter组件进行绘制，由绘制得到的多个Flutter组件构成所述虚拟文档对象模型树的对应界面。

5.如权利要求1-4任一项所述的界面渲染方法，其特征在于，所述JS对象包括JS组件和CSS样式。

6.如权利要求1-4任一项所述的界面渲染方法，其特征在于，所述预设布局库包括Yoga布局库。

7.如权利要求1-4任一项所述的界面渲染方法，其特征在于，还包括：

对所述预设布局库进行编程规范的转换，使得所述预设布局库符合Flutter的编程规范。

8.一种界面渲染装置，其特征在于，包括：

获取模块，用于获取待渲染的虚拟文档对象模型树；

转换模块，用于将所述虚拟文档对象模型树转换为Flutter的渲染树；

布局模块，用于根据所述渲染树创建对应预设布局库的布局视图树，并通过所述预设布局库获取对应所述布局视图树的布局参数；

绘制模块，用于根据所述布局参数，通过Flutter对所述渲染树进行绘制，得到所述虚拟文档对象模型树的对应界面。

9.一种存储介质，其上存储有计算机程序，其特征在于，当所述计算机程序被电子设备加载时执行如权利要求1-7任一项所述的界面渲染方法。

10.一种电子设备，包括处理器和存储器，所述存储器存储有计算机程序，其特征在于，所述处理器通过加载所述计算机程序执行如权利要求1-7任一项所述的界面渲染方法。

Images