【技术实现步骤摘要】
本申请涉及前端页面开发，特别是涉及一种页面布局方法、电子设备及计算机可读存储介质。
技术介绍
1、页面布局技术是指响应页面布局需求，规划前端页面中各页面元素的布局，使得各页面元素合理的展示在页面布局主体屏幕尺寸的前端页面，供用户查看。
2、现有的页面布局方法包括表格布局（html）、弹性盒子布局（flexbox）、网格布局（grid）、响应式布局等。
3、随着科技的发展，前端页面和页面布局主体的屏幕尺寸趋于多样化。例如chatgpt、llama等ai大模型可以生成多样的前端页面。从而，页面布局需求趋于多样化。现有的页面布局方法无法适应多样化的页面布局需求，导致页面布局结果不合理，影响用户体验。
技术实现思路
1、本申请提供一种页面布局方法、页面布局装置、电子设备及计算机可读存储介质，能够解决现有的页面布局方法无法适应多样化的页面布局需求的问题。
2、本申请提供了一种页面布局方法，包括：获取为待布局页面初始配置的第一组件集合，第一组件集合包括第一数量个组件；基于第一组件集合中各组件的参考组件尺寸，从第一组件集合中选出与待布局页面的屏幕尺寸匹配的第二数量个组件，得到第二组件集合，并确定第二组件集合中各组件在待布局页面的位置关联信息，第二数量小于或等于第一数量，参考组件尺寸属于组件尺寸范围；基于第二组件集合和位置关联信息，对待布局页面进行页面布局。
3、本申请提供了一种页面布局装置，包括：获取模块、选择模块和布局模块。获取模块用于获取为待布
4、本申请提供了一种电子设备，包括存储器和处理器，处理器用于执行存储器中存储的程序指令，以实现上述页面布局方法。
5、本申请提供了一种计算机可读存储介质，其上存储有程序指令，程序指令被处理器执行时实现上述页面布局方法。
6、上述方案，本申请基于第一组件集合中各组件的组件尺寸范围中的参考组件尺寸，选择与待布局页面的屏幕尺寸匹配的第二组件集合，并确定第二组件集合中各组件的位置关联信息；利用第二组件集合和位置关联信息进行页面布局。第二组件集合中组件数量与待布局页面的屏幕尺寸匹配，且第二组件集合中各组件按照位置关联信息可布局在待布局页面。因此，本申请提供的页面布局方法，能够适应各屏幕尺寸、各组件数量、各组件尺寸的页面布局，因此能够灵活适应多样化的页面布局需求。且无需预先设置页面布局模板，降低开发成本。
7、应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，而非限制本申请。
本文档来自技高网...【技术保护点】
1.一种页面布局方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述基于所述第一组件集合中各所述组件的参考组件尺寸，从所述第一组件集合中选出与所述待布局页面的屏幕尺寸匹配的第二数量个所述组件，得到第二组件集合，包括：
3.根据权利要求2所述的方法，其特征在于，所述基于所述第一组件集合中各所述组件的所述参考组件尺寸和优先级，从所述第一组件集合中选出与所述屏幕尺寸匹配的第二数量个所述组件，得到所述第二组件集合，包括：
4.根据权利要求3所述的方法，其特征在于，所述第二组件集合中各所述组件的可布局位置是在确定所述目标布局优先级过程中获取的；
5.根据权利要求4所述的方法，其特征在于，所述确定所述优先级范围中满足所述第一布局要求的最小优先级，包括：
6.根据权利要求5所述的方法，其特征在于，所述参考组件尺寸包括参考行高和参考列宽，所述屏幕尺寸包括屏幕列宽和屏幕行高，所述检测所述候选组件集合中的各候选组件按照对应的所述参考组件尺寸是否均可布局在所述屏幕尺寸的待布局页面，包括：
7.根据权利要求6所述
8.根据权利要求6所述的方法，其特征在于，所述搜索当前所述候选组件的候选位置集合中是否存在满足当前所述候选组件的插入条件的候选位置，包括：
9.根据权利要求6所述的方法，其特征在于，所述获取所述候选组件集合中当前所述候选组件的候选位置集合，包括：
10.根据权利要求9所述的方法，其特征在于，至少一个新增所述候选位置包括第一候选位置和第二候选位置，所述基于上一所述候选组件的可布局位置确定至少一个新增所述候选位置，包括：
11.根据权利要求10所述的方法，其特征在于，所述可布局位置包括可布局行坐标和可布局列坐标，所述确定位于当前所述候选组件的可布局位置所属行、且位于当前所述候选组件的可布局位置右侧的所述第一候选位置，包括：
12.根据权利要求1所述的方法，其特征在于，所述参考组件尺寸为所述组件尺寸范围中的最小尺寸；
13.根据权利要求12所述的方法，其特征在于，所述对所述待放大组件进行尺寸放大，以更新所述待放大组件的目标组件尺寸，包括：
14.根据权利要求13所述的方法，其特征在于，所述确定满足第二布局要求的各所述待放大组件的目标尺寸放大量，包括：
15.根据权利要求14所述的方法，其特征在于，所述待放大组件每次确定的中间尺寸放大量均满足：按照所述中间尺寸放大量的放大结果属于所述待放大组件的组件尺寸范围；
16.根据权利要求12所述的方法，其特征在于，所述第二组件集合包括第三数量个第一元素组件、第四数量个第二元素组件、第四数量个第二元素组件对应的第五数量个子容器组件；所述确定所述第二组件集合中需放大的至少一个所述组件，作为待放大组件，包括：
17.根据权利要求1所述的方法，其特征在于，所述第一组件集合包括第六数量个第一元素组件、第七数量个第二元素组件、第七数量个所述第二元素组件对应的第八数量个子容器组件，所述第六数量、所述第七数量和所述第八数量之和等于所述第一数量；
18.根据权利要求1所述的方法，其特征在于，所述获取为待布局页面初始配置的第一组件集合，包括：
19.一种电子设备，其特征在于，包括存储器和处理器，所述处理器用于执行所述存储器中存储的程序指令，以实现权利要求1至18中任一项所述的方法。
20.一种计算机可读存储介质，其上存储有程序指令，其特征在于，所述程序指令被处理器执行时实现权利要求1至18中任一项所述的方法。
...【技术特征摘要】
1.一种页面布局方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述基于所述第一组件集合中各所述组件的参考组件尺寸，从所述第一组件集合中选出与所述待布局页面的屏幕尺寸匹配的第二数量个所述组件，得到第二组件集合，包括：
3.根据权利要求2所述的方法，其特征在于，所述基于所述第一组件集合中各所述组件的所述参考组件尺寸和优先级，从所述第一组件集合中选出与所述屏幕尺寸匹配的第二数量个所述组件，得到所述第二组件集合，包括：
4.根据权利要求3所述的方法，其特征在于，所述第二组件集合中各所述组件的可布局位置是在确定所述目标布局优先级过程中获取的；
5.根据权利要求4所述的方法，其特征在于，所述确定所述优先级范围中满足所述第一布局要求的最小优先级，包括：
6.根据权利要求5所述的方法，其特征在于，所述参考组件尺寸包括参考行高和参考列宽，所述屏幕尺寸包括屏幕列宽和屏幕行高，所述检测所述候选组件集合中的各候选组件按照对应的所述参考组件尺寸是否均可布局在所述屏幕尺寸的待布局页面，包括：
7.根据权利要求6所述的方法，其特征在于，所述可布局位置包括可布局行坐标和可布局列坐标，当前所述候选组件的插入条件还包括所述候选位置的列坐标大于所述候选位置所属行中所述当前可布局组件的可布局列坐标、以及所述候选位置的行坐标大于所述候选位置所属列中所述当前可布局组件的可布局行坐标；
8.根据权利要求6所述的方法，其特征在于，所述搜索当前所述候选组件的候选位置集合中是否存在满足当前所述候选组件的插入条件的候选位置，包括：
9.根据权利要求6所述的方法，其特征在于，所述获取所述候选组件集合中当前所述候选组件的候选位置集合，包括：
10.根据权利要求9所述的方法，其特征在于，至少一个新增所述候选位置包括第一候选位置和第二候选位置，所述基于上一所述候选组件的可布局位置确定至少一...
【专利技术属性】
技术研发人员：陶嘉明，操涛涛，陈立力，周明伟，
申请(专利权)人：浙江大华技术股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。