(19)国家知识产权局 (12)发明 专利 (10)授权公告 号 (45)授权公告日 (21)申请 号 202210578339.4 (22)申请日 2022.05.26 (65)同一申请的已公布的文献号 申请公布号 CN 114675924 A (43)申请公布日 2022.06.28 (73)专利权人 云账户技 术 （天津） 有限公司 地址 300384 天津市滨 海新区滨 海高新区 华苑产业园区工华道2 号天百中心1号 楼6层、 21至2 2层 (72)发明人 姜傲腾　王震　江浩　刘鑫　 (74)专利代理 机构 北京银龙知识产权代理有限 公司 11243 专利代理师 崔姬玉 (51)Int.Cl. G06F 9/451(2018.01)G06F 8/38(2018.01) (56)对比文件 CN 112965691 A,2021.0 6.15 CN 111475163 A,2020.07.31 CN 112394908 A,2021.02.23 CN 107368487 A,2017.1 1.21 CN 110489117 A,2019.1 1.22 CN 113360211 A,2021.09.07 CN 105302552 A,2016.02.0 3 CN 112711401 A,2021.04.27 US 2014215 308 A1,2014.07.31 US 2013212487 A1,2013.08.15 审查员 张忠钊 (54)发明名称 基于FlexBox的页面布局方法、 装置及电子 设备 (57)摘要 本发明提供一种基于FlexBox的页面布局方 法、 装置及电子设备， 其中方法包括： 接收到用户 通过交互端发送的扩展指令， 所述扩展指令用于 指示现有页面中的被扩展页面； 对 所述被扩展页 面进行扩展， 得到扩展层； 所述扩展层与所述被 扩展页面之间的布局信息相同； 接收到用户通过 所述交互端发送的视图添加指令， 所述视图添加 指令包括待添加视图以及待添加视图的布局属 性； 根据所述待添加视图的布局属性进行布局计 算， 并根据所述布局计算的计算结果将所述待添 加视图添加至所述扩展层。 本发明基于FlexBox 的页面布局方法能够高效率布局视图。 权利要求书2页 说明书8页 附图6页 CN 114675924 B 2022.08.19 CN 114675924 B 1.一种基于FlexBox的页面布局方法， 其特 征在于， 包括： 接收到用户通过交互端发送的扩展指令， 所述扩展指令用于指示现有页面中的被扩展 页面； 对所述被扩展页面进行扩展， 得到扩展层； 所述扩展层与所述被扩展页面之间的布局 信息相同； 接收到用户通过所述交互端发送的视图添加指令， 所述视图添加指令包括待添加视图 以及待添加视图的布局 属性； 根据所述待添加视图的布局属性进行布局计算， 并根据 所述布局计算的计算结果将所 述待添加视图添加至所述扩展层； 根据所述待添加视图的布局 属性进行布局计算， 包括： 根据所述待添加视图的布局 属性， 采用layout 布局方法进行 所述布局计算； 根据所述待添加视图的布局 属性， 采用layout 布局方法进行 所述布局计算， 包括： 检验所述待添加视图是否包 含嵌套视图； 若所述检验的检验结果为所述待添加视图包含所述嵌套视图， 采用深度优先遍历方式 对所述待添加视图进行遍历得到所述待添加视图中全部的所述嵌套视图； 根据所述嵌套视图的布局属性， 采用layout布局方法进行所述布局计算， 并根据所述 布局计算的计算结果将所述嵌套视图添加至所述扩展层。 2.根据权利要求1所述的基于FlexBox的页面布局方法， 其特 征在于： 根据所述待添加视图的布局属性进行布局计算， 并根据 所述布局计算的计算结果将所 述待添加视图添加至所述扩展层， 包括： 检测所述扩展层是否存在添加完成的视图； 若所述检测的检测结果为所述扩展层存在所述添加完成的视图， 获取所述扩展层上最 近添加的所述添加完成的视图的布局属性； 根据所述待添加视图的布局属性以及最近添加 的所述添加完成的视图的布局属性进 行所述布局计算， 并根据所述布局计算的计算结果将 所述待添加视图添加至所述扩展层； 若所述检测的检测结果为所述扩展层不存在所述添加完成的视图， 根据 所述待添加视 图的布局属性进 行布局计算， 并根据所述布局计算的计算结果将所述待 添加视图添加至所 述扩展层。 3.根据权利要求2所述的基于FlexBox的页面布局方法， 其特 征在于： 所述待添加视图的布局 属性包括与后一视图之间的间距值； 根据所述待添加视图的布局属性以及最近添加的所述添加完成的视图的布局属性进 行所述布局计算， 包括： 根据最近添加的所述添加完成的视图的布局属性， 计算得到最近添加的所述添加完成 的视图的最大横坐标的坐标值， 将所述最大横坐标的坐标值与所述与后一视图之 间的间距 值相加， 得到所述待添加视图的布局位置的横坐标的坐标值。 4.根据权利要求2所述的基于FlexBox的页面布局方法， 其特 征在于： 所述待添加视图的布局属性包括以下至少一项： 宽度值、 高度值、 对齐方式、 与后一视 图之间的间距值。 5.根据权利要求1所述的基于FlexBox的页面布局方法， 其特 征在于： 应用于iOS系统，权　利　要　求　书 1/2 页 2 CN 114675924 B 2采用layout 布局方法进行 所述布局计算， 包括： 检测iOS系统中的run loop执行情况； 根据所述runloop 执行情况， 将所述l ayout布局方法的执行优先级设置为高于iOS系统 的渲染优先级。 6.一种基于FlexBox的页面布局装置， 其特 征在于， 包括： 接收模块， 用于接收到用户通过交互端发送的扩展指令， 所述扩展指令用于指示现有 页面中的被扩展页面； 对所述被扩展页面进 行扩展， 得到扩展层； 所述扩展层与所述被扩展 页面之间的布局信息相同； 执行模块， 用于接收到用户通过所述交互端发送的视 图添加指令， 所述视 图添加指令 包括待添加视图以及待添加视图的布局 属性； 所述执行模块， 还用于根据所述待添加视 图的布局属性进行布局计算， 并根据所述布 局计算的计算结果将所述待添加视图添加至所述扩展层； 所述执行模块， 还用于根据所述待添加视图的布局属性， 采用layout布局方法进行所 述布局计算； 所述执行模块， 还用于检验所述待添加视图是否包 含嵌套视图； 所述执行模块， 还用于若所述检验的检验结果为所述待添加视 图包含所述嵌套视 图， 采用深度优先遍历方式对所述待添加视图进行遍历得到所述待添加视图中全部的所述嵌 套视图； 所述执行模块， 还用于根据所述嵌套视图的布局属性， 采用layout布局方法进行所述 布局计算， 并根据所述布局计算的计算结果将所述嵌套视图添加至所述扩展层。 7.一种电子设备， 其特征在于： 包括处理器， 存储器及存储在所述存储器上并可在所述 处理器上运行的程序或指 令， 所述程序或指 令被所述处理器执行时实现如权利要求 1至5中 任一项所述的基于FlexBox的页面布局方法中的步骤。 8.一种可读存储介质， 其特征在于： 所述可读存储介质上存储程序或指令， 所述程序或 指令被处理器执行时实现如权利要求 1至5中任一项 所述的基于FlexBox的页面布局方法中 的步骤。权　利　要　求　书 2/2 页 3 CN 114675924 B 3