一种界面布局方法、电子设备和计算机可读存储介质与流程

技术特征：
1.一种界面布局方法，应用于第一终端设备，其特征在于，包括：当所述第一终端设备与第二终端设备连接时，获取所述第二终端设备的显示分辨率；根据所述显示分辨率计算出所述第二终端设备的屏幕宽高比值，并从多个预先划分的比例区间中，确定出所述屏幕宽高比值所处的比例区间；根据所述屏幕宽高比值所处的比例区间，获取所述比例区间对应的显示布局样式；基于所述显示布局样式，从所述第一终端设备的应用页面中选取第一视觉元素；根据所述显示布局样式对所述第一视觉元素进行布局，以生成所述第二终端设备的显示界面。2.根据权利要求1所述的方法，其特征在于，所述显示布局样式包括显示窗口数量、栅格数量、栅格宽度、边距以及间距，其中，每个显示窗口所包含的栅格的数量不同，边距用于指示第一视觉元素与所述第二终端设备的显示界面边缘之间的距离，间距用于指示第一视觉元素之间的距离；在所述根据所述显示布局样式对所述第一视觉元素进行布局，以生成所述第二终端设备的显示界面之前，包括：根据所述第一视觉元素的类型、获取的所述第一视觉元素的属性信息以及预设的元素布局规则，确定出所述第一视觉元素所占的栅格数量，其中，所述元素布局规则包括多个类型的第一视觉元素对应的布局规则。3.根据权利要求2所述的方法，其特征在于，在所述根据所述第一视觉元素的类型、获取的所述第一视觉元素的属性信息以及预设的元素布局规则，确定出所述第一视觉元素所占的栅格数量之后，包括：获取所述第二终端设备的设备信息，所述设备信息包括显示区域的大小、显示区域的位置以及设备类型；根据所述设备信息和所述第一视觉元素所占的栅格数量，确定出所述第一视觉元素的位置，所述位置包括所述第一视觉元素所处的显示窗口以及在所述显示窗口在所述第二终端设备的显示区域的所处位置。4.根据权利要求2所述的方法，其特征在于，所述根据所述显示布局样式对所述第一视觉元素进行布局，以生成所述第二终端设备的显示界面，包括：在所述显示布局样式中，根据获取的每个所述第一视觉元素的位置、每个所述第一视觉元素的所占的栅格数量，对多个所述第一视觉元素进行布局，以生成所述第二终端设备的显示界面，其中，多个所述第一视觉元素所占的栅格总数小于或者等于栅格数量。5.根据权利要求2所述的方法，其特征在于，在所述根据所述第一视觉元素的类型、获取的所述第一视觉元素的属性信息以及预设的元素布局规则，确定出所述第一视觉元素所占的栅格数量之前，还包括：识别每个所述第一视觉元素的类型；根据获取的每个类型的第一视觉元素的数量以及所述屏幕宽高比值，确定出每个的第一视觉元素的属性信息，其中，所述属性信息包括显示状态、元素宽度、字体大小以及滚动状态。6.根据权利要求5所述的方法，其特征在于，在所述根据获取的每个类型的第一视觉元素的数量以及所述屏幕宽高比值，确定出每个的第一视觉元素的属性信息之后，还包括：
根据所述显示分辨率以及显示需求，修改待显示的所述第一视觉元素的属性信息，所述显示需求用于指示用户对于所述第二终端设备的显示界面所展示的内容的显示要求。7.根据权利要求1所述的方法，其特征在于，在所述根据所述显示布局样式对所述第一视觉元素进行布局，以生成所述第二终端设备的显示界面之后，还包括：在虚拟屏中显示所述显示界面，并将所述显示界面投屏至所述第二终端设备，以使所述第二终端设备的显示屏幕显示所述显示界面。8.根据权利要求1所述的方法，其特征在于，在所述根据所述显示布局样式对所述第一视觉元素进行布局，以生成所述第二终端设备的显示界面之后，还包括：接收所述第二终端设备发送的用于切换显示界面的事件，并根据所述切换显示界面的事件，基于所述显示布局样式，从所述第一终端设备的应用页面中选取第二视觉元素，根据所述显示布局样式对所述第二视觉元素进行布局，以生成所述第二终端设备的显示界面。9.一种电子设备，其特征在于，包括：显示屏；一个或多个处理器；存储器；以及一个或多个计算机程序，其中所述一个或多个计算机程序被存储在所述存储器中，所述一个或多个计算机程序包括指令，当所述指令被所述设备执行时，使得所述设备执行包括权利要求1至8中的任一项所述的界面布局方法。10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括存储的程序，其中，在所述程序运行时控制所述计算机可读存储介质所在设备执行权利要求1至8中任意一项所述的界面布局方法。

技术总结
本发明实施例提供的一种界面布局方法、电子设备和计算机可读存储介质的技术方案中，当第一终端设备与第二终端设备连接时，获取第二终端设备的显示分辨率；根据显示分辨率计算出第二终端设备的屏幕宽高比值，并从多个预先划分的比例区间中，确定出屏幕宽高比值所处的比例区间；根据屏幕宽高比值所处的比例区间，获取比例区间对应的显示布局样式；基于显示布局样式，从第一终端设备的应用页面中选取第一视觉元素；根据显示布局样式对第一视觉元素进行布局，以生成第二终端设备的显示界面，通过设置不同比例区间对应的显示布局样式，使得根据显示布局样式对第一视觉元素进行布局时，保证第一视觉元素能够达到整齐、美观、易用性强的视觉效果。视觉效果。视觉效果。


技术研发人员：杨婉艺 李春东 孟德泉 周星辰
受保护的技术使用者：华为技术有限公司
技术研发日：2020.12.02
技术公布日：2022/6/4