页面组件的布局方法、装置、计算机设备及存储介质与流程

本申请涉及人工智能，尤其涉及页面组件的布局方法、装置、计算机设备及存储介质。

背景技术：

1、在前端页面开发领域，低代码开发平台是无需代码或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行前端页面开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页。

2、然而，现有低代码开发平台的网页端界面可视化编辑器通常无法适配不同设备的屏幕尺寸，导致低代码开发平台中的组件在不适配的设备上的显示效果不佳，而手动调整组件布局，尤其是调整组件复杂布局时，需要用户耗费大量时间和精力，这些问题限制了用户的开发效率，导致用户对低代码开发平台的体验不佳。

技术实现思路

1、本申请实施例提供了页面组件的布局方法、装置、计算机设备及存储介质，可以自动调整低代码开发平台中页面组件的布局，使得页面组件的布局自动与当前设备的显示界面适配，无需手动调整，从而提高了用户的开发效率以及对低代码开发平台的体验感。

2、第一方面，本申请实施例提供了一种页面组件的布局方法，其包括：

3、获取目标低代码开发平台的目标布局资源以及目标布局规则，所述目标布局资源包括多个携带有不同元素特征的组件，所述元素特征包括尺寸特征、层次关系特征以及元素优先级特征；

4、基于预设的网格布局算法、所述目标布局规则、各所述组件分别对应的尺寸特征以及层次关系特征将多个所述组件放置在当前页面的网格系统中，得到所述目标布局资源的初步布局页面；

5、基于预设的模拟退火算法、所述目标布局规则、各所述组件的层次关系特征以及元素优先级特征对所述初步布局页面中的组件进行位置优化，得到第一目标布局页面；

6、输出所述第一目标布局页面。

7、第二方面，本申请实施例还提供了一种页面组件的布局装置，其包括：

8、第一获取单元，用于获取目标低代码开发平台的目标布局资源以及目标布局规则，所述目标布局资源包括多个携带有不同元素特征的组件，所述元素特征包括尺寸特征、层次关系特征以及元素优先级特征；

9、放置单元，用于基于预设的网格布局算法、所述目标布局规则、各所述组件分别对应的尺寸特征以及层次关系特征将多个所述组件放置在当前页面的网格系统中，得到所述目标布局资源的初步布局页面；

10、优化单元，用于基于预设的模拟退火算法、所述目标布局规则、各所述组件的层次关系特征以及元素优先级特征对所述初步布局页面中的组件进行位置优化，得到第一目标布局页面；

11、输出单元，用于输出所述第一目标布局页面。

12、第三方面，本申请实施例还提供了一种计算机设备，其包括存储器及处理器，所述存储器上存储有计算机程序，所述处理器执行所述计算机程序时实现上述方法。

13、第四方面，本申请实施例还提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时可实现上述方法。

14、本申请实施例提供了页面组件的布局方法、装置、计算机设备及存储介质。其中，所述方法包括：获取目标低代码开发平台的目标布局资源以及目标布局规则，所述目标布局资源包括多个携带有不同元素特征的组件，所述元素特征包括尺寸特征、层次关系特征以及元素优先级特征；基于预设的网格布局算法、所述目标布局规则、各所述组件分别对应的尺寸特征以及层次关系特征将多个所述组件放置在当前页面的网格系统中，得到所述目标布局资源的初步布局页面；基于预设的模拟退火算法、所述目标布局规则、各所述组件的层次关系特征以及元素优先级特征对所述初步布局页面中的组件进行位置优化，得到第一目标布局页面；输出所述第一目标布局页面。一方面，本申请可以根据当前设备中当前页面的网格系统自动对目标低代码开发平台的组件进行适配摆放，使得低代码开发平台中的组件布局自动与当前设备的显示界面适配，无需手动调整，从而提高了用户的开发效率以及对低代码开发平台的体验感；另一方面，本申请还通过模拟退火算法对初步布局页面中的组件进行位置优化，模拟退火算法具有提升布局美观度和逻辑性的特性，从而使得组件布局更加合理且美观，进一步提高了用户对低代码开发平台的体验感。

技术特征：

1.一种页面组件的布局方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，所述输出所述第一目标布局页面之前，所述方法还包括：

3.根据权利要求1所述的方法，所述输出所述第一目标布局页面之后，所述方法还包括：

4.根据权利要求3所述的方法，其特征在于，所述将移动后的所述第一组件作为调整后的所述目标组件，返回执行所述基于预设的网格排列算法对调整后的所述目标组件进行碰撞检测的步骤，直至所有组件均不存在碰撞，输出第三目标布局页面之后，所述方法还包括：

5.根据权利要求1所述的方法，其特征在于，所述输出所述第一目标布局页面之后，所述方法还包括：

6.根据权利要求5所述的方法，其特征在于，所述获取目标低代码开发平台的目标布局资源以及目标布局规则之后，所述方法还包括：

7.根据权利要求6所述的方法，其特征在于，所述检测所述第二数据库中是否存储有与所述目标窗口尺寸对应的组件网格布局数据之后，所述方法还包括：

8.一种页面组件的布局装置，其特征在于，包括：

9.一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1-7中任一项所述的页面组件的布局方法。

10.一种存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行如权利要求1-7任一项所述的页面组件的布局方法。

技术总结本申请实施例公开了页面组件的布局方法、装置、计算机设备及存储介质。方法包括：获取目标低代码开发平台的目标布局资源以及目标布局规则，目标布局资源包括多个携带有不同元素特征的组件，元素特征包括尺寸特征、层次关系特征以及元素优先级特征；基于网格布局算法、目标布局规则、各组件分别对应的尺寸特征以及层次关系特征将多个组件放置在当前页面的网格系统中，得到目标布局资源的初步布局页面；基于模拟退火算法、目标布局规则、各组件的层次关系特征以及元素优先级特征对初步布局页面中的组件进行位置优化，得到第一目标布局页面；输出第一目标布局页面。通过实施本申请实施例的方法可自动调整低代码开发平台的中页面组件的布局。技术研发人员：赵艳兴,黄波,乔照民受保护的技术使用者：北京零壹视界科技有限公司技术研发日：技术公布日：2025/1/13