应用程序的构建方法、设备和计算机可读存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种应用程序的构建方法、设备和计算机可读存储介质。

背景技术

移动应用程序开发方式通常需要独立为每个平台编写代码，这意味着开发者需要具备多种编程语言和技术的知识。

应用程序的开发通常需要不同的操作系统的开发者参与，移动端系统主要包括Android和iOS系统，一般使用Java或Kotlin技术开发Android应用程序，使用Objective-C或Swift技术开发iOS应用程序，因此，开发一个不同系统的应用程序需要重新学习或研发一门新的语言，导致应用程序的开发效率低下。

发明内容

本发明的主要目的在于提供一种应用程序的构建方法、设备和计算机可读存储介质，旨在解决如何提高应用程序的开发效率的问题。

为实现上述目的，本发明提供的一种应用程序的构建方法，所述应用程序的构建方法包括以下步骤：

显示应用程序构建界面，所述应用程序构建界面包括组件选择区域、应用程序预览区域和属性设置区域，其中，所述组件选择区域包括至少一个可选择组件；

响应于针对所述可选择组件的触发操作，在所述应用程序预览区域显示应用程序初始样式，其中，所述应用程序初始样式基于被触发的目标组件生成，以及在所述属性设置区域显示所述目标组件对应的属性设置信息；

响应于针对所述属性设置信息的编辑操作，显示应用程序更新样式，其中，所述应用程序更新样式为所述应用程序初始样式进行更新后的样式；

响应于针对所述应用程序更新样式的确认操作，生成并输出目标应用程序，其中，所述目标应用程序的显示样式和所述应用程序更新样式相对应。

可选地，所述可选择组件包括常用组件和/或布局组件，所述响应于针对所述可选择组件的触发操作，在所述应用程序预览区域显示应用程序初始样式的步骤包括：

响应于针对常用组件的触发操作，在所述应用程序预览区域显示在应用程序中常用组件对应的功能初始样式；和/或，

响应于针对布局组件的触发操作，在所述应用程序预览区域显示在应用程序中布局组件对应的布局初始样式。

可选地，所述响应于针对布局组件的触发操作，在所述应用程序预览区域显示在应用程序中布局组件对应的布局初始样式的步骤包括：

响应于针对行布局组件的触发操作，在所述应用程序预览区域显示应用程序对应的行布局组件对应的行布局初始样式；或者，

响应于针对列布局组件的触发操作，在所述应用程序预览区域显示应用程序对应的列布局组件对应的列布局初始样式；或者，

响应于针对列表布局组件的触发操作，在所述应用程序预览区域显示应用程序对应的列表布局组件对应的列表布局初始样式。

可选地，所述在所述属性设置区域显示所述目标组件对应的属性设置信息的步骤包括：

当所述可选择组件为容器组件时，在所述属性设置区域显示所述容器组件对应的属性设置信息，所述属性设置信息包括布局属性信息、尺寸属性信息中至少一个；

所述响应于针对所述属性设置信息的编辑操作，显示应用程序更新样式的步骤包括：

当所述布局属性信息包括静态属性信息时，响应于针对所述布局属性信息的编辑操作，显示所述静态属性信息对应的更新样式；所述静态属性信息包括外边距信息和/或位置偏移信息；

当所述尺寸属性信息包括高度信息、宽度信息和/或圆角信息时，响应于针对所述尺寸属性信息的编辑操作，显示所述高度信息、所述宽度信息和/或所述圆角信息对应的更新样式。

可选地，所述在所述属性设置区域显示所述目标组件对应的属性设置信息的步骤包括：

当所述可选择组件为文本组件时，在所述属性设置区域显示所述文本组件对应的属性设置信息，所述属性设置信息包括布局属性信息、文本属性信息中至少一个；

所述响应于针对所述属性设置信息的编辑操作，显示应用程序更新样式的步骤包括：

当所述布局属性信息包括静态属性信息和/或动态属性信息时，响应于针对所述布局属性信息的编辑操作，显示所述静态属性信息和/或所述动态属性信息对应的更新样式；所述静态属性信息包括外边距信息和/或位置偏移信息，所述动态属性信息包括文本变量信息；

当所述文本属性信息包括文本样式信息、文本颜色信息和/或文本尺寸信息时，响应于针对所述文本属性信息的编辑操作，显示所述文本样式信息、所述文本颜色信息和/或所述文本尺寸信息对应的更新样式。

可选地，所述触发操作为拖拽操作，所述响应于针对所述可选择组件的触发操作，在所述应用程序预览区域显示应用程序初始样式的步骤包括：

响应于针对所述可选择组件的触发操作，显示所述可选择组件从所述组件选择区域到所述应用程序预览区域的拖拽效果；

当所述可选择组件拖拽至所述应用程序预览区域时，在所述应用程序预览区域显示应用程序初始样式。

可选地，所述响应于针对所述属性设置信息的编辑操作，显示应用程序更新样式的步骤包括：

响应于针对所述属性设置信息的编辑操作，基于所述被触发的目标组件和所述属性设置信息生成应用程序的界面更新信息；

对所述界面更新信息进行解析处理，确定所述应用程序的对应的组件构造逻辑；

根据所述组件构造逻辑生成并显示应用程序更新样式。

可选地，所述对所述界面更新信息进行解析处理的步骤包括：

当所述界面更新信息包括动态属性信息时，基于正则表达式匹配得到预设格式的变量；

将所述变量替换为相应的动态属性信息。

为实现上述目的，本发明还提供一种应用程序的构建设备，所述应用程序的构建设备包括存储器、处理器以及存储在所述存储器并可在所述处理器上执行的应用程序的构建程序，所述应用程序的构建程序被所述处理器执行时实现如上所述的应用程序的构建方法的各个步骤。

为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有应用程序的构建程序，所述应用程序的构建程序被处理器执行时实现如上所述的应用程序的构建方法的各个步骤。

本发明提供的一种应用程序的构建方法、设备和计算机可读存储介质，显示应用程序构建界面，响应于针对可选择组件的触发操作，在应用程序预览区域显示应用程序初始样式，其中，应用程序初始样式基于被触发的目标组件生成，以及在属性设置区域显示目标组件对应的属性设置信息；响应于针对属性设置信息的编辑操作，显示应用程序更新样式，其中，应用程序更新样式为应用程序初始样式进行更新后的样式；响应于针对应用程序更新样式的确认操作，生成并输出目标应用程序，其中，目标应用程序的显示样式和应用程序更新样式相对应。通过应用程序构建界面实现目标应用程序的生成并输出，以及对组件的选取和组件的属性设置信息的设置，使得应用程序的开发交互灵活和直观，可视化界面使应用程序开发更加高效和便捷，从而节省了应用程序开发的时间和成本，降低了应用程序的开发难度。

附图说明

图1为本发明实施例涉及的应用程序的构建设备的硬件结构示意图；

图2为本发明应用程序的构建方法的第一实施例的流程示意图；

图3为本发明应用程序的构建方法的应用程序构建界面的示意图；

图4为本发明应用程序的构建方法的应用程序构建界面的示意图；

图5为本发明应用程序的构建方法的应用程序构建界面的示意图；

图6为本发明应用程序的构建方法的应用程序构建界面的示意图；

图7为本发明应用程序的构建方法的第二实施例中步骤S20的细化流程示意图；

图8为本发明应用程序的构建方法的第三实施例的流程示意图；

图9为本发明应用程序的构建方法的第四实施例的流程示意图；

图10为本发明应用程序的构建方法的第五实施例中步骤S30的细化流程示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例的主要解决方案是：显示应用程序构建界面，响应于针对可选择组件的触发操作，在应用程序预览区域显示应用程序初始样式，其中，应用程序初始样式基于被触发的目标组件生成，以及在属性设置区域显示目标组件对应的属性设置信息；响应于针对属性设置信息的编辑操作，显示应用程序更新样式，其中，应用程序更新样式为应用程序初始样式进行更新后的样式；响应于针对应用程序更新样式的确认操作，生成并输出目标应用程序，其中，目标应用程序的显示样式和应用程序更新样式相对应。通过应用程序构建界面实现目标应用程序的生成并输出，以及对组件的选取和组件的属性设置信息的设置，使得应用程序的开发交互灵活和直观，可视化界面使应用程序开发更加高效和便捷，从而节省了应用程序开发的时间和成本，降低了应用程序的开发难度。

作为一种实现方案，应用程序的构建设备可以如图1所示。

本发明实施例方案涉及的是应用程序的构建设备，应用程序的构建设备包括：处理器101，例如CPU，存储器102，通信总线103。其中，通信总线103用于实现这些组件之间的连接通信。

存储器102可以是高速RAM存储器，也可以是稳定的存储器(non-volatilememory)，例如磁盘存储器。如图1所示，作为一种计算机可读存储介质的存储器102中可以包括应用程序的构建程序；而处理器101可以用于调用存储器102中存储的应用程序的构建程序，并执行以下操作：

显示应用程序构建界面，所述应用程序构建界面包括组件选择区域、应用程序预览区域和属性设置区域，其中，所述组件选择区域包括至少一个可选择组件；

响应于针对所述可选择组件的触发操作，在所述应用程序预览区域显示应用程序初始样式，其中，所述应用程序初始样式基于被触发的目标组件生成，以及在所述属性设置区域显示所述目标组件对应的属性设置信息；

响应于针对所述属性设置信息的编辑操作，显示应用程序更新样式，其中，所述应用程序更新样式为所述应用程序初始样式进行更新后的样式；

响应于针对所述应用程序更新样式的确认操作，生成并输出目标应用程序，其中，所述目标应用程序的显示样式和所述应用程序更新样式相对应。

可选地，处理器101可以用于调用存储器102中存储的应用程序的构建程序，并执行以下操作：

响应于针对常用组件的触发操作，在所述应用程序预览区域显示在应用程序中常用组件对应的功能初始样式；和/或，

响应于针对布局组件的触发操作，在所述应用程序预览区域显示在应用程序中布局组件对应的布局初始样式。

可选地，处理器101可以用于调用存储器102中存储的应用程序的构建程序，并执行以下操作：

响应于针对行布局组件的触发操作，在所述应用程序预览区域显示应用程序对应的行布局组件对应的行布局初始样式；或者，

响应于针对列布局组件的触发操作，在所述应用程序预览区域显示应用程序对应的列布局组件对应的列布局初始样式；或者，

响应于针对列表布局组件的触发操作，在所述应用程序预览区域显示应用程序对应的列表布局组件对应的列表布局初始样式。

可选地，处理器101可以用于调用存储器102中存储的应用程序的构建程序，并执行以下操作：

当所述可选择组件为容器组件时，在所述属性设置区域显示所述容器组件对应的属性设置信息，所述属性设置信息包括布局属性信息、尺寸属性信息中至少一个；

所述响应于针对所述属性设置信息的编辑操作，显示应用程序更新样式的步骤包括：

当所述布局属性信息包括静态属性信息时，响应于针对所述布局属性信息的编辑操作，显示所述静态属性信息对应的更新样式；所述静态属性信息包括外边距信息和/或位置偏移信息；

当所述尺寸属性信息包括高度信息、宽度信息和/或圆角信息时，响应于针对所述尺寸属性信息的编辑操作，显示所述高度信息、所述宽度信息和/或所述圆角信息对应的更新样式。

可选地，处理器101可以用于调用存储器102中存储的应用程序的构建程序，并执行以下操作：

当所述可选择组件为文本组件时，在所述属性设置区域显示所述文本组件对应的属性设置信息，所述属性设置信息包括布局属性信息、文本属性信息中至少一个；

所述响应于针对所述属性设置信息的编辑操作，显示应用程序更新样式的步骤包括：

当所述布局属性信息包括静态属性信息和/或动态属性信息时，响应于针对所述布局属性信息的编辑操作，显示所述静态属性信息和/或所述动态属性信息对应的更新样式；所述静态属性信息包括外边距信息和/或位置偏移信息，所述动态属性信息包括文本变量信息；

当所述文本属性信息包括文本样式信息、文本颜色信息和/或文本尺寸信息时，响应于针对所述文本属性信息的编辑操作，显示所述文本样式信息、所述文本颜色信息和/或所述文本尺寸信息对应的更新样式。

可选地，处理器101可以用于调用存储器102中存储的应用程序的构建程序，并执行以下操作：

响应于针对所述可选择组件的触发操作，显示所述可选择组件从所述组件选择区域到所述应用程序预览区域的拖拽效果；

当所述可选择组件拖拽至所述应用程序预览区域时，在所述应用程序预览区域显示应用程序初始样式。

可选地，处理器101可以用于调用存储器102中存储的应用程序的构建程序，并执行以下操作：

响应于针对所述属性设置信息的编辑操作，基于所述被触发的目标组件和所述属性设置信息生成应用程序的界面更新信息；

对所述界面更新信息进行解析处理，确定所述应用程序的对应的组件构造逻辑；

根据所述组件构造逻辑生成并显示应用程序更新样式。

可选地，处理器101可以用于调用存储器102中存储的应用程序的构建程序，并执行以下操作：

当所述界面更新信息包括动态属性信息时，基于正则表达式匹配得到预设格式的变量；

将所述变量替换为相应的动态属性信息。

基于上述应用程序的构建设备的硬件构架，提出本发明应用程序的构建方法的实施例。

参照图2，图2为本发明应用程序的构建方法的第一实施例，应用程序的构建方法包括以下步骤：

步骤S10，显示应用程序构建界面，应用程序构建界面包括组件选择区域、应用程序预览区域和属性设置区域，其中，组件选择区域包括至少一个可选择组件。

可选地，应用程序由多个组件组成，用于实现特定的功能或提供某种服务，通常包括用户界面、业务逻辑、数据存储和其他支持功能。其中，每个组件都是一个独立的模块，负责完成特定的任务或提供特定的功能。

可选地，如图3所示，区域A为组件选择区域。组件选择区域中显示有至少一个可选择组件。可选地，可选择组件包括常用组件和布局组件。其中，常用组件用于实现应用程序的功能。例如，常用组件包括文本组件、容器组件、图片组件、图标组件、按钮组件、输入框组件、开关组件和单选按钮组件等。布局组件用于进行页面布局的组件，通常用于搭建应用程序的页面结构。通过布局组件，可以将页面内容按照一定的规则和排列方式进行组织和展示。例如，布局组件包括行布局组件、列布局组件和列表布局组件等。

示例性的，文本组件一般用于展示文本内容，支持多种字体、字号、颜色、排版等格式设置，以及超链接、列表等基本文本元素。文本组件支持富文本格式，可以在文本中插入图片、表格、视频等多媒体内容。在文本比较多的情况下，文本组件可以提供搜索和筛选功能，方便用户快速定位所需信息。文本组件可以支持用户的交互和操作，例如单击文本跳转到对应页面、鼠标悬停显示提示信息等。

示例性的，容器组件是指用于包裹、组织和管理其他组件的组件。容器组件提供了一个容器或布局的结构，用来组织和展示其他组件，并提供统一的样式和行为。容器组件可以将其他组件包裹在内部，形成嵌套关系，从而实现组件的层次结构和组合功能。容器组件可以管理和处理多个子组件的事件，例如点击、鼠标滚动等，并将事件传递给适当的组件进行响应。容器组件可以管理和共享状态信息，使得子组件之间可以共享数据，并通过状态更新机制保持组件之间的同步。

示例性的，图片组件是前端开发中用于展示图像内容的组件，可以在网页或应用程序中显示图片，并提供一些常用的功能和特性，如加载图片、设置图片大小、添加图片描述等。

示例性的，图标组件是前端开发中用于展示各种符号和图形的组件，通常以矢量图形的方式呈现。它可以用于各种场景，如菜单、按钮、面包屑、标签等，以及在线或离线文档、应用程序、桌面软件中。

示例性的，按钮组件用于用户交互，触发特定操作或事件。

示例性的，输入框组件用于接收用户的输入信息，可以用于表单填写、搜索等场景。

示例性的，开关组件是前端开发中用于控制开关状态的组件，通常用于表单、设置、筛选等场景中。通过开关组件，用户可以在两个状态之间切换，例如打开或关闭某个功能、启用或禁用某个选项等。

示例性的，单选按钮组件是前端开发中用于提供一组单选选项的组件，通常用于表单、筛选等场景中。通过单选按钮组件，用户可以从一组选项中选择一个选项作为自己的答案或要素。

除了图3所示的常用组件，还包括其他的常用组件，例如，下拉菜单组件用于提供选项列表供用户选择，通常用于筛选、分类等功能。列表组件用于展示大量数据或内容，支持滚动浏览。图片轮播组件用于用于展示多张图片的轮播效果，常用于广告、产品展示等页面。模态框组件用于弹出窗口，用于显示详细信息、确认操作等。标签页组件用于多标签页切换，常用于分隔不同内容或功能。进度条组件用于显示任务或操作的进度。图表组件用于可视化数据或统计结果，方便用户理解和分析。导航栏组件用于网站或应用的主要导航方式，提供页面间的跳转。

除了图3所示的布局组件，布局组件还包括其他的组件，例如，容器组件用于放置其他组件的容器，通常具有某种排列方式或布局规则。网格布局组件用于按照网格方式排列页面内容，通常可以设置行数、列数、单元格大小等属性。弹性盒子布局组件用于按照弹性盒子模型排列页面内容，可以设置多种不同的对齐方式、分配剩余空间等参数。响应式布局组件用于根据不同屏幕尺寸或设备类型自动调整布局方式和样式。栅格化布局组件用于在不同位置和层级上展示页面内容，模拟传统印刷物的排版方式。绝对定位布局组件用于将页面内容根据绝对坐标进行定位，通常需要手动指定位置和大小。

可选地，如图4所示，区域B为应用程序预览区域，应用程序预览区域基于选定的组件，生成应用程序的预览效果，应用程序预览区域对应渲染区。可选地，当组件被拖至应用程序预览区域，将基于组件生成应用程序的预览效果。

可选地，如图5或图6所示，区域C为属性设置区域，在属性设置区域对组件的属性设置信息进行设置。可选地，当在组件选择区域对可选择组件进行选定后，可以在属性设置区域中设置选定的组件对应的属性设置信息。属性设置区域显示当前组件支持的属性设置，对属性设置的时候，应用程序预览区域也会进行相应的更新呈现。

示例性的，如图5所示，在组件选择区域对容器组件进行选定后，显示容器组件对应的属性设置区域，属性设置区域中包括容器组件对应的属性设置信息，属性设置信息包括布局信息和尺寸信息等。例如，布局信息包括外边距信息和位置偏移信息等。尺寸信息包括高度、宽度和圆角信息等。

示例性的，如图6所示，在组件选择区域对文本组件进行选定后，显示文本组件对应的属性设置区域，属性设置区域中包括文本组件对应的属性设置信息，属性设置信息包括布局信息和文本属性信息等。其中，布局信息包括外边距信息和位置偏移信息等。文本属性信息包括预设样式、字重、文本颜色和文字尺寸等信息。

可选地，当组件的属性设置信息包括动态属性信息时，动态属性信息的值可以设置。动态属性的设置图标，如图6中属性设置区域中文本旁边的框起来的图标所示，动态属性信息可以绑定一个动态的值，这个值结果只有在终端上运行页面的时候才会呈现出来，称之为变量。

步骤S20，响应于针对可选择组件的触发操作，在应用程序预览区域显示应用程序初始样式，其中，应用程序初始样式基于被触发的目标组件生成，以及在属性设置区域显示目标组件对应的属性设置信息。

可选地，触发操作包括拖拽操作、点击操作、长按操作或者双击操作等，但不限于上述操作，针对可选择组件的触发操作用于选定目标组件。

可选地，应用程序初始样式是应用程序在加载时默认的外观样式、布局样式和/或功能样式等。

可选地，基于被触发的目标组件生成应用程序的初始样式，并在应用程序预览区域显示应用程序初始样式。示例性的，当目标组件为文本组件时，基于文本组件生成应用程序初始样式，并在应用程序预览区域显示应用程序初始样式，应用程序初始样式包括文本样式。示例性的，当目标组件为行布局组件时，基于行布局组件生成应用程序初始样式，并在应用程序预览区域显示应用程序初始样式，应用程序初始样式包括布局样式。

可选地，响应于针对可选择组件的触发操作，显示可选择组件从组件选择区域到应用程序预览区域的拖拽效果；当可选择组件拖拽至应用程序预览区域时，在应用程序预览区域显示应用程序初始样式。

若鼠标的起始位置在候选组件的预设范围内，则基于预设的拖拽组件和鼠标的实时位置控制候选组件，以实现候选组件拖拉吸附；获取鼠标的释放位置；若释放位置在编辑区域，则确定候选组件的拖拽操作完成。

可选地，利用Flutter组件中的drag组件来实现拖拉吸附的效果，同时监听鼠标的事件来实现指针落在组件范围内绘制边框的效果，同时定义好组件放入规则，在鼠标释放后进行规则判断来判断是否可以放入组件。在组件编辑态展示的时候，利用GetX技术来监听属性变更后重新更新界面来实现属性变化后同步更新编辑区的效果。通过用户的拖拽操作实现组件的选定，确定目标组件，提高了组件选定的效率，以提高应用程序的开发效率。

步骤S30，响应于针对属性设置信息的编辑操作，显示应用程序更新样式，其中，应用程序更新样式为应用程序初始样式进行更新后的样式。

可选地，编辑操作包括拖拽操作、点击操作、长按操作、双击操作、选择操作、输入操作等，但不限于上述操作，针对属性设置信息的编辑操作用于对目标组件的属性设置信息进行编辑。

可选地，应用程序更新样式是应用程序基于组件更新的外观样式、布局样式和/或功能样式等。

可选地，响应于针对目标组件的属性设置信息的编辑操作，生成应用程序更新样式，并在应用程序预览区域显示应用程序更新样式，以替换应用程序初始样式。示例性的，当目标组件为文本组件时，响应于对文本组件的属性设置信息的编辑操作，例如，对位置偏移信息的编辑操作，设置为水平偏移-1，垂直偏移-1，根据位置偏移信息的编辑操作，生成应用程序更新样式。

步骤S40，响应于针对应用程序更新样式的确认操作，生成并输出目标应用程序，其中，目标应用程序的显示样式和应用程序更新样式相对应。

可选地，确认操作包括拖拽操作、点击操作、长按操作、双击操作、选择操作、输入操作等，但不限于上述操作，针对应用程序更新样式的确认操作用于生成并输出目标应用程序。在生成并输出目标应用程序之后，便完成了应用程序的开发。

在本实施例的技术方案中，通过应用程序构建界面实现目标应用程序的生成并输出，以及对组件的选取和组件的属性设置信息的设置，使得应用程序的开发交互灵活和直观，可视化界面使应用程序开发更加高效和便捷，从而节省了应用程序开发的时间和成本，降低了应用程序的开发难度。

参照图7，图7为本发明应用程序的构建方法的第二实施例，基于第一实施例，步骤S20包括：

步骤S21，响应于针对常用组件的触发操作，在应用程序预览区域显示在应用程序中常用组件对应的功能初始样式；和/或，

步骤S22，响应于针对布局组件的触发操作，在应用程序预览区域显示在应用程序中布局组件对应的布局初始样式。

在本实施例中，可选择组件包括常用组件和/或布局组件。

可选地，常用组件用于实现特定的功能、交互或数据展示等。常用组件通常包含了业务逻辑、用户交互和数据处理等功能。常用组件通常是具有特定功能或展示特定数据的独立模块。常用组件可以接收输入、处理逻辑、进行状态管理，并将结果展示给用户。例如，按钮、表单输入框、图表等都是常用组件的示例。

可选地，布局组件用于定义和管理用户界面的结构和布局。布局组件通常不直接包含具体的功能或交互逻辑，而是帮助组织其他组件的位置和大小，以实现良好的用户界面布局。布局组件可以指定子组件的位置、尺寸和排列方式，以达到预期的界面布局效果。例如，常见的布局组件有容器、网格布局、栅格系统等。由于布局组件主要负责界面的结构和布局，它们具有较高的重用性。在不同的页面或布局需求中，可以多次使用相同的布局组件来实现一致的界面风格。

布局组件和常用组件并没有严格的界限，有时它们的功能和使用方式可能会有交叉。在实际开发中，根据项目需求和设计原则，可以合理选择使用布局组件和常用组件来实现功能和界面布局。

可选地，应用程序初始样式包括功能初始样式和/或布局初始样式。

可选地，功能初始样式是应用程序在加载时常用组件对应的默认的外观样式和/或功能样式等。

可选地，布局初始样式是应用程序在加载时布局组件对应的默认的外观样式和/或布局样式等。

可选地，响应于针对行布局组件的触发操作，在应用程序预览区域显示应用程序对应的行布局组件对应的行布局初始样式。可选地，行布局初始样式是应用程序在加载时行布局组件对应的默认的外观样式和/或布局样式等。示例性的，响应于针对行布局组件的触发操作，基于行布局组件对应用程序进行布局调整，并在应用程序预览区域显示应用程序的行布局初始样式。

可选地，响应于针对列布局组件的触发操作，在应用程序预览区域显示应用程序对应的列布局组件对应的列布局初始样式。可选地，列布局初始样式是应用程序在加载时列布局组件对应的默认的外观样式和/或布局样式等。示例性的，响应于针对列布局组件的触发操作，基于列布局组件对应用程序进行布局调整，并在应用程序预览区域显示应用程序的列布局初始样式。

可选地，响应于针对列表布局组件的触发操作，在应用程序预览区域显示应用程序对应的列表布局组件对应的列表布局初始样式。可选地，列表布局初始样式是应用程序在加载时列表布局组件对应的默认的外观样式和/或布局样式等。示例性的，响应于针对列表布局组件的触发操作，基于列表布局组件对应用程序进行布局调整，并在应用程序预览区域显示应用程序的列表布局初始样式。

在本实施例的技术方案中，通过对布局组件的选取，使得应用程序的开发交互灵活和直观，可视化界面使应用程序开发更加高效和便捷，节省了应用程序开发的时间和成本，降低了应用程序的开发难度。

参照图8，图8为本发明应用程序的构建方法的第三实施例，基于第一或第二实施例，步骤S20包括：

步骤S23，当可选择组件为容器组件时，在属性设置区域显示容器组件对应的属性设置信息，属性设置信息包括布局属性信息、尺寸属性信息中至少一个；

步骤S30包括：

步骤S31，当布局属性信息包括静态属性信息时，响应于针对布局属性信息的编辑操作，显示静态属性信息对应的更新样式；静态属性信息包括外边距信息和/或位置偏移信息；

步骤S32，当尺寸属性信息包括高度信息、宽度信息和/或圆角信息时，响应于针对尺寸属性信息的编辑操作，显示高度信息、宽度信息和/或圆角信息对应的更新样式。

可选地，如图6所示，容器组件对应的属性设置信息包括布局属性信息和/或尺寸属性信息等。当布局属性信息包括静态属性信息时，静态属性信息包括外边距信息和/或位置偏移信息，响应于针对布局属性信息的编辑操作，显示静态属性信息对应的更新样式。

可选地，属性设置信息包括静态属性信息，静态属性信息是在组件创建时设置，并且通常在整个组件生命周期中不会更改。这些属性通常用于定义组件的初始状态、外观和行为。例如，静态属性信息包括字体样式、颜色、边距、尺寸等信息。动态属性信息是在组件渲染过程中可能会发生变化的属性。这些属性通常受到应用程序的状态、用户输入或其他事件的影响。

示例性的，静态属性信息包括样式属性信息，如颜色、字体大小、字体粗细等。静态属性信息包括布局属性信息，如边距、对齐方式、大小约束等。静态属性信息包括外观属性信息，如背景图片、阴影效果、圆角等。静态属性信息包括文本属性信息，如文本内容、文字方向、字体样式等。静态属性信息包括图片属性信息，如图片地址、填充模式等。

可选地，如图6所示，当尺寸属性信息包括高度信息、宽度信息和/或圆角信息时，响应于针对尺寸属性信息的编辑操作。示例性的，将高度信息设置为100，将宽度信息设置为100，将圆角信息设置为预先设置的圆角信息。

在本实施例的技术方案中，对组件的属性设置信息的设置，使得应用程序的开发交互灵活和直观，可视化界面使应用程序开发更加高效和便捷，从而节省了应用程序开发的时间和成本，降低了应用程序的开发难度。

参照图9，图9为本发明应用程序的构建方法的第四实施例，基于第一至第三中任一实施例，步骤S20包括：

步骤S24，当可选择组件为文本组件时，在属性设置区域显示文本组件对应的属性设置信息，属性设置信息包括布局属性信息、文本属性信息中至少一个；

步骤S30包括：

步骤S33，当布局属性信息包括静态属性信息和/或动态属性信息时，响应于针对布局属性信息的编辑操作，显示静态属性信息和/或动态属性信息对应的更新样式；静态属性信息包括外边距信息和/或位置偏移信息，动态属性信息包括文本变量信息；

步骤S34，当文本属性信息包括文本样式信息、文本颜色信息和/或文本尺寸信息时，响应于针对文本属性信息的编辑操作，显示文本样式信息、文本颜色信息和/或文本尺寸信息对应的更新样式。

可选地，属性设置信息可以分为静态属性信息和动态属性信息。其中，动态属性信息可以通过更新组件的状态或使用数据绑定等机制进行改变。例如，动态属性信息包括文本内容、图片、是否可见、位置等信息。

静态属性信息和动态属性信息共同定义了组件的外观和行为，其中，静态属性信息为组件提供了初始值和默认样式，而动态属性信息使组件能够根据应用程序的需求进行交互和变化。在Flutter组件中，静态属性信息通常通过构造函数的参数来设置，而动态属性信息则通过组件的setState()方法或其他状态管理机制来更新，通过管理静态属性信息和动态属性信息，可以构建出具有丰富交互性和灵活性的组件。

示例性的，动态属性信息包括状态属性信息，如开关状态、选中项、可见性等。动态属性信息包括数据属性信息，如列表数据、输入框的值、滑块的数值等。动态属性信息包括事件属性信息，如按钮点击事件、手势操作事件、拖拽结束事件等。动态属性信息包括条件属性信息，如是否加载中、是否显示错误、是否可编辑等。

可选地，当属性设置信息为静态属性信息时，确定属性设置信息的属性值为静态值；当属性设置信息为动态属性信息时，确定属性设置信息的属性值为动态值。其中，静态值指的是在编译时或加载时确定并固定的值；动态值指的是在运行时可以根据程序逻辑或外部条件的变化而改变的值。

在本实施例的技术方案中，对组件的属性设置信息的设置，使得应用程序的开发交互灵活和直观，可视化界面使应用程序开发更加高效和便捷，从而节省了应用程序开发的时间和成本，降低了应用程序的开发难度。

参照图10，图10为本发明应用程序的构建方法的第五实施例，基于第一至第四中任一实施例，步骤S30包括：

步骤S35，响应于针对属性设置信息的编辑操作，基于被触发的目标组件和属性设置信息生成应用程序的界面更新信息；

步骤S36，对界面更新信息进行解析处理，确定应用程序的对应的组件构造逻辑；

步骤S37，根据组件构造逻辑生成并显示应用程序更新样式。

可选地，当界面更新信息包括动态属性信息时，基于正则表达式匹配得到预设格式的变量；将变量替换为相应的动态属性信息。在目标组件编辑态展示时，监听动态属性信息变更后，更新界面更新信息中的属性值，以同步更新编辑区域的组件效果。

可选地，在应用程序的编辑完成后，获取应用程序页面的页面树；根据页面树生成页面的界面更新信息。其中，页面树表示网页结构和组织关系的树形结构，用于描述网页中各个元素之间的父子关系，并以层次结构的方式展示整个页面的组成部分。

可选地，组件构造逻辑是用于将组件翻译成Flutter组件的构造逻辑。可选地，组件构造逻辑是组件的builder类，其中，组件的builder类是一种设计模式，用于创建和配置组件对象的实例。

可选地，界面更新信息包括页面JSON结构，其中，JSON结构包括组件类型节点、组件属性节点和子节点。可选地，生成的JSON结构中的值类型将根据属性值的类型自动确定。简单的数据类型，如字符串、数字、布尔值等，会保持原样。而复杂的类型，如嵌套的对象或列表等，将以嵌套的方式进行转换。如果属性值是自定义的对象，则需要确保该对象实现了toJSON()方法，以使正确地将其转换为JSON格式。可选地，考虑到Flutter组件的属性可能是动态属性信息的，如果在生成JSON结构时还需要处理动态属性信息，可以针对动态属性信息的当前值进行相应的处理，以确保生成的JSON结构能准确反映组件的当前状态。

可选地，根据JSON结构中组件类型节点的解析内容确定组件类型；根据JSON结构中组件属性节点的解析内容确定属性设置信息。

可选地，组件对应有多个属性，根据当前所选择的属性进行渲染，每个属性的界面效果由相应的属性来控制。编辑完页面后，点击预览，从当前页面树进行转换，把页面转成JSON格式，JSON里面的关键节点包含组件类型节点、组件配置节点和子节点，其中，组件类型节点包括type节点、组件配置节点包括args节点、子节点包括child节点或者children节点。属性值根据组件的类型及相关属性返回控制。

可选地，生成JSON结构后，把页面JSON结构传入到渲染端，渲染端会根据type节点找到对应的组件，然后解析args节点获取属性设置信息，然后根据属性设置信息构造组件。

当属性设置信息为动态属性信息，组件属性值为动态值即变量，当变量的解析也是在args解析逻辑中，通过正则表达式，匹配相应的由${}包裹的值，对里面的值进行查找替换，替换为业务数据，从而实现组件绑定的值动态化的过程。

在本实施例的技术方案中，对界面更新信息进行解析处理，确定应用程序的对应的组件构造逻辑；根据组件构造逻辑生成并显示应用程序更新样式。通过对应用程序的组件进行编辑和预览，提高了应用程序的开发效率。

本发明还提供一种应用程序的构建设备，所述应用程序的构建设备包括存储器、处理器以及存储在所述存储器并可在所述处理器上执行的应用程序的构建程序，所述应用程序的构建程序被所述处理器执行时实现如上实施例所述的应用程序的构建方法的各个步骤。

本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有应用程序的构建程序，所述应用程序的构建程序被处理器执行时实现如上实施例所述的应用程序的构建方法的各个步骤。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、系统、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、系统、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、系统、物品或者装置中还存在另外的相同要素。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例系统可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个计算机可读存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，停车管理设备，空调器，或者网络设备等)执行本发明各个实施例所述的系统。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。