CN117389675A - 一种布局控件的方法,计算设备及存储介质 - Google Patents
一种布局控件的方法,计算设备及存储介质 Download PDFInfo
- Publication number
- CN117389675A CN117389675A CN202311606923.7A CN202311606923A CN117389675A CN 117389675 A CN117389675 A CN 117389675A CN 202311606923 A CN202311606923 A CN 202311606923A CN 117389675 A CN117389675 A CN 117389675A
- Authority
- CN
- China
- Prior art keywords
- control
- setting
- controls
- line
- primary control
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Document Processing Apparatus (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种布局控件的方法,适于在计算设备中执行,方法包括:在布局窗口中设置多个控件,控件包括尺寸信息;初始化锚定系统,在锚定系统中生成控件的锚线;在锚定系统中根据锚线设置多个控件之间的位置关系;以及加载布局窗口,根据控件的尺寸信息和位置关系在布局窗口中显示多个控件。本发明还一并公开了一种计算设备和计算机可读存储介质。
Description
本申请是2021年01月04日提交的发明专利申请的分案申请,原申请的申请号:202110002902.9,发明名称:一种布局控件的方法,计算设备及存储介质。
技术领域
本发明涉及界面布局领域,特别涉及一种布局控件的方法,计算设备及存储介质。
背景技术
随着计算机技术的发展,在计算机中运行的操作系统及应用程序在可视化方面逐渐变得美观,操作也更加便捷,人机交互的门槛降低,效率的得到了很大的提高。在对桌面应用程序进行开发时,使用合理的方式对窗口控件布局就变得非常重要。
在对窗口控件进行布局时,可以采用固定布局和动态布局。固定布局是指通过在页面中固定的坐标将窗口控件进行定位并布局,但这种方式在应用过程中,相同的应用程序界面在不同的客户端的硬件设备上进行显示时,由于硬件设备及相应软件设置的差异性,相同的应用程序界面在显示上会有较大差异。并且通过坐标进行布局操作时对窗口控件的位置不能有直观的把控,设置较为繁琐。
而目前采用动态布局时,通常采用将窗口控件进行水平布局,垂直布局,表格布局,网格布局,堆布局等方式,这些部署方式较为简单,但这些布局方式,均是将控件基于窗口进行布局,布局的方式较为单一,不够灵活。并且通过相互嵌套使用实现较为复杂的布局设计时,代码量比较大和复杂,对于特殊场景下的使用不够便利。
为此,需要一种新的布局控件的方法。
发明内容
为此,本发明提供一种布局控件的方法,以力图解决或者至少缓解上面存在的问题。
根据本发明的一个方面,提供一种布局控件的方法,适于在计算设备中执行,方法包括:在布局窗口中设置多个控件,控件包括尺寸信息;初始化锚定系统,在锚定系统中生成控件的锚线;在锚定系统中根据锚线设置多个控件之间的位置关系;以及加载布局窗口,根据控件的尺寸信息和位置关系在布局窗口中显示多个控件。
可选地,在根据本发明的方法中,多个控件包括主控件,初始化锚定系统包括步骤:在锚定系统中,设置与布局窗口相对应的主控件,主控件的尺寸和布局窗口相同。
可选地,在根据本发明的方法中,多个控件还包括一级控件,在锚定系统中根据锚线设置多个控件之间的位置关系包括步骤:根据一级控件的锚线设置一级控件与主控件锚定,来设置一级控件在布局窗口中的相对位置。
可选地,在根据本发明的方法中,根据一级控件的锚线设置一级控件与主控件锚定包括步骤:设置一级控件的锚线与主控件的边界或者分界线锚定,主控件的分界线包括水平分界线和垂直分界线。
可选地,在根据本发明的方法中,设置一级控件的锚线与主控件的边界锚定包括步骤:设置一级控件停靠在主控件的边界,和/或设置一级控件的锚线与主控件的边界的距离。
可选地,在根据本发明的方法中,多个控件还包括二级控件,方法还包括:根据二级控件的锚线设置二级控件与一级控件锚定,来设置二级控件在布局窗口中的相对位置。
可选地,在根据本发明的方法中,控件的锚线包括边线,和分界线,边界包括上边线,下边线,左边线和右边线,分界线包括水平分界线和垂直分界线。
可选地,在根据本发明的方法中,控件还包括边框,根据一级控件的锚线设置一级控件与主控件锚定还包括步骤:设置一级控件的边框的宽度,并设置一级控件的边框与主控件的边界锚定。
可选地,在根据本发明的方法中,根据二级控件的锚线设置二级控件与一级控件锚定包括步骤:设置二级控件的边框的宽度;设置二级控件的边框与一级控件的边框锚定,和/或设置二级控件的分界线与一级控件的分界线锚定。
可选地,在根据本发明的方法中,设置二级控件的边框与一级控件的边框锚定包括步骤:设置二级控件停靠在一级控件的边框,和/或设置二级控件的边框与一级控件的边框的距离。
可选地,在根据本发明的方法中,边框包括上边框,下边框,左边框和右边框。
可选地,在根据本发明的方法中,尺寸信息包括控件的长和宽,在布局窗口中设置多个控件包括步骤:新建多个控件,设置多个控件的长和宽。
根据本发明的又一方面,提供了一种计算设备,包括:一个或多个处理器;存储器;以及一个或多个程序,其中一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行,一个或多个程序包括用于执行根据本发明的一种布局控件的方法的任一方法的指令。
根据本发明的还有一个方面,提供了一种存储一个或多个程序的计算机可读存储介质,一个或多个程序包括指令,该指令当由计算设备执行时,使得计算设备执行根据本发明的一种布局控件的方法中的任一方法。
本发明中,通过在布局窗口中设置多个控件,初始化锚定系统,锚定系统生成控件的锚线,并在锚定系统中根据锚线设置多个控件之间的位置关系,从而设置控件在布局窗口中的位置关系。在锚定系统中设置控件之间的位置关系时,先设置与布局窗口相同的主控件,随后根据一级控件的锚线设置与主控件锚定,设置一级控件在布局窗口中的位置;以及根据二级控件的锚线设置与一级控件锚定,设置二级控件在布局窗口中的位置。从而能够通过设置二级控件与一级控件的相对位置关系,达到设置二级控件在布局窗口中的位置的目的。二级控件能够在布局窗口发生改变时,随着一级控件的位置改变而变换位置,但不改变其相对于一级控件的位置关系,灵活对控件在布局窗口中的位置进行设置。
并进一步的,还可以设置一级控件和二级控件的边框,通过设置边框的宽度从而限定不同控件之间的最近距离,从而满足特殊场景下对控件布局的需求。
附图说明
为了实现上述以及相关目的,本文结合下面的描述和附图来描述某些说明性方面,这些方面指示了可以实践本文所公开的原理的各种方式,并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述,本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开,相同的附图标记通常指代相同的部件或元素。
图1a示出了一种现有技术对窗口中控件布局的方式;
图1b示出了又一种现有技术对窗口中控件布局的方式;
图2示出了根据本发明一个示范性实施例的计算设备200的结构框图;
图3示出了根据本发明的一个实施例的一种布局控件的方法300的流程示意图;
图4a示出了根据本发明一个实施例的布局控件的方式;
图4b示出了根据本发明又一个实施例的布局控件的方式;以及
图4c示出了根据本发明再一个实施例的布局控件的方式。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。相同的附图标记通常指代相同的部件或元素。
图1a示出了一种现有技术对窗口中控件布局的方式。图1中的布局窗口110中,设置有控件102和控件101。设置控件101的上边缘在布局窗口110的上边界,右边缘在布局窗口110的右边界;设置控件102在布局窗口110水平分界线的左边界处。控件101和控件102设置位置时,先建立控件101和控件102与布局窗口110之间的关联映射关系,随后确定控件101和控件102相应的定位规则。该现有技术对控件进行布局时,只能将控件基于布局窗口进行布局,缺乏灵活性,不能满足多变的设计需求。
图1b示出了又一种现有技术对窗口中控件布局的方式。图1b中对布局窗口120的长和宽采用三等分的方式,将布局窗口120划分为等大的9个布局控件的位置,可以网格状排列部署控件121~129。这种布局方法较为方便,能够快速部署相应的控件,但与此同时,布局的方式较为单一,不够灵活。并且通过相互嵌套使用实现较为复杂的布局设计时,代码量比较大和复杂,对于特殊场景下的使用不够便利。
为此,本发明提供了一种新的布局控件的方法。方法适于在计算设备中执行。图2示出了根据本发明一个示范性实施例的计算设备200的结构框图。如图2所示,在基本的配置202中,计算设备200典型地包括系统存储器206和一个或者多个处理器204。存储器总线208可以用于在处理器204和系统存储器206之间的通信。
取决于期望的配置,处理器204可以是任何类型的处理,包括但不限于:微处理器(μP)、微控制器(μC)、数字信息处理器(DSP)或者它们的任何组合。处理器204可以包括诸如一级高速缓存210和二级高速缓存212之类的一个或者多个级别的高速缓存、处理器核心214和寄存器216。示例的处理器核心214可以包括运算逻辑单元(ALU)、浮点数单元(FPU)、数字信号处理核心(DSP核心)或者它们的任何组合。示例的存储器控制器218可以与处理器204一起使用,或者在一些实现中,存储器控制器218可以是处理器204的一个内部部分。
取决于期望的配置,系统存储器206可以是任意类型的存储器,包括但不限于:易失性存储器(诸如RAM)、非易失性存储器(诸如ROM、闪存等)或者它们的任何组合。系统存储器206可以包括操作系统220、一个或者多个程序222以及程序数据224。在一些实施方式中,程序222可以布置为在操作系统上由一个或者多个处理器204利用程序数据224执行根据本发明的方法300的指令223。
计算设备200还可以包括有助于从各种接口设备(例如,输出设备242、外设接口244和通信设备246)到基本配置202经由总线/接口控制器230的通信的接口总线240。示例的输出设备242包括图形处理单元248和音频处理单元250。它们可以被配置为有助于经由一个或者多个A/V端口252与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外设接口244可以包括串行接口控制器254和并行接口控制器256,它们可以被配置为有助于经由一个或者多个I/O端口258和诸如输入设备(例如,键盘、鼠标、笔、语音输入设备、触摸输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备246可以包括网络控制器260,其可以被布置为便于经由一个或者多个通信端口264与一个或者多个其他计算设备262通过网络通信链路的通信。
网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块,并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号,它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例,通信介质可以包括诸如有线网络或者专线网络之类的有线介质,以及诸如声音、射频(RF)、微波、红外(IR)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。
在根据本发明的计算设备200中,应用222包括执行一种布局控件的方法300的多条程序指令,这些程序指令可以指示处理器204执行本发明的一种计算设备200中运行的布局控件的方法300中的部分步骤,以便计算设备200中的各部分通过执行本发明的一种布局控件的方法300来实现对控件进行布局。
计算设备200可以实现为服务器,例如文件服务器240、数据库250、服务器、应用程序服务器等,这些电子设备可以是诸如个人数字助理(PDA)、无线网络浏览设备、应用专用设备、或者可以包括上面任何功能的混合设备。可以实现为包括桌面计算机和笔记本计算机配置的个人计算机,也在一些实施例中,计算设备200被配置为执行一种布局控件的方法300。
图3示出了根据本发明的一个实施例的一种布局控件的方法300的流程示意图。方法300在计算设备中执行,如在计算设备200中执行。如图3所示,一种布局控件的方法300始于步骤S310,在布局窗口中设置多个控件,控件包括尺寸信息。在该步骤中分别在布局窗口中定义多个控件,并设置控件在布局窗口中的尺寸信息。控件的形状为直角矩形,控件的尺寸信息包括在布局窗口中的长和宽。
随后,执行步骤S320,初始化锚定系统,在锚定系统中生成控件的锚线。控件包括主控件,一级控件和二级控件。初始化锚定系统时,设置与布局窗口相对应的主控件,主控件的尺寸和布局窗口相同,并在锚定系统中生成控件的锚线。
根据本发明的一个实施例,图4a示出了根据本发明一个实施例的布局控件的方式,图4a中,根据布局窗口的大小新建有主控件,在布局窗口还新建有一级控件411~一级控件416。其中,新建一级控件411的代码如下:
QLabel*pRect_1=new QLabel;
pRect_1即为一级控件411,一级控件411的长为a,宽为b。根据本发明一个实施例,锚定系统为DAnchors锚定系统。初始化锚定系统时,设置一级控件411在锚定系统中的对象指针,向锚定系统传递控件参数,初始化锚定系统的代码如下:
DAnchors<QLabel>rect1(pRect_1);
同理,按照上述方法,自定义一级控件412~416,代码如下:
DAnchors<QLabel>main_anchors(pWindow);
DAnchors<QLabel>label_anchors_2(pLabel_2);
DAnchors<QLabel>label_anchors_3(pLabel_3);
DAnchors<QLabel>label_anchors_4(pLabel_4);
DAnchors<QLabel>label_anchors_5(pLabel_5);
DAnchors<QLabel>label_anchors_6(pLabel_6)。
在锚定系统中为控件生成的锚线包括边线和分界线,边线包括上边线(top),下边线(bottom),左边线(left)和右边线(right);分界线包括水平分界线(horizontalCenter)和垂直分界线(verticalCenter)。以如图4a中所示出的一级控件413为例,n即为一级控件413的上边线,o为下边线,p为左边线,q为下边线。控件412中,r为一级控件412的水平分界线,s为垂直分界线。
随后,执行步骤S330,在锚定系统中根据锚线设置多个控件之间的位置关系。在锚定系统中,设置控件之间的位置关系时包括步骤:根据一级控件的锚线设置一级控件与主控件锚定,来设置一级控件在布局窗口中的相对位置。
设置一级控件与主控件锚定包括步骤:设置一级控件的锚线与主控件的边界锚定,或者分界线锚定。主控件的边界为矩形主控件的四个边,分别为上边界(top),下边界(bottom),左边界(left)和右边界(right);主控件的分界线包括水平分界线(horizontalCenter)和垂直分界线(verticalCenter),主控件的水平分界线和垂直分界线的交点即为主控件的中心点。
以图4a中示出的主控件410为例,u即为主控件410的上边界,t为下边界,v为左边界,w为右边界;并且,虚线x为主控件410的水平分界线,y为垂直分界线。
设置一级控件的锚线与主控件的边界锚定时,包括步骤:设置一级控件停靠在主控件的边界;和/或设置一级控件的锚线与主控件的边界的距离。本发明中,锚定是指一级控件到主控件的距离不变。停靠是指当一级控件到主控件的距离为零时,即一级控件紧靠于主控件的某一边缘。一级控件的锚线与主控件的边界或分界线的距离为锚定距离。
设置一级控件与主控件的相对位置关系的方式包括:
1、设置一级控件停靠在主控件的边界,即将一级控件的边线紧靠于主控件的边界,锚定距离为0。根据本发明一个实施例,如图4a所示,设置一级控件411的上边线紧靠于主控件410的上边界,左边线紧靠于主控件410的左边界,设置代码如下所示:
label_anchors_1.setLeft(main_anchors.left());
label_anchors_1.setTop(main_anchors.top());
其中,DAnchors是具体实现设置相对位置关系的类,在该实施例中,控件411(label_anchors_1)与主控件(main_anchors)形成相对位置关系。
设置一级控件412的上边线紧靠于主控件410的上边界,右边线紧靠于主控件410的右边界,设置代码如下所示:
label_anchors_2.setRight(main_anchors.right());
label_anchors_2.setTop(main_anchors.top());
设置一级控件413的下边线紧靠于主控件410的下边界,左边线紧靠于主控件410的左边界,设置代码如下所示:
label_anchors_3.setBottom(main_anchors.bottom());
label_anchors_3.setLeft(main_anchors.left());
设置一级控件414的下边线紧靠于主控件410的下边界,右边线紧靠于主控件410的右边界,设置代码如下所示:
label_anchors_4.setBottom(main_anchors.bottom());
label_anchors_4.setRight(main_anchors.right());
2、设置一级控件停靠在主控件的边界,和设置一级控件的锚线与主控件的边界的距离,即设置一级控件的一条边线紧靠在主控件的一条边界,另一条边线或分界线与主控件的一条边界的距离。如图4a所示,设置一级控件415的下边线紧靠在主控件的下边界,设置右边线距离主控件的右边界55像素,锚定距离为55px。
3、设置一级控件的锚线与主控件的边界的距离,即设置一级控件的两条边线分别与主控件的两条边界的锚定距离。
4、设置一级控件的锚线与主控件的分界线锚定,即设置一级控件的分界线分别与主控件的水平分界线和垂直分界线锚定。如设置一个一级控件水平分界线与主控件的水平分界线锚定,锚定距离为0,代码如下:
label_anchors_n.setVerticalCenter(main_anchors.verticalCenter())
且垂直分界线与主控件的垂直分界线锚定,锚定距离为200像素,代码如下:
label_anchors_1.setHorizontalCenter(main_anchors.horizontalCenter())
label_anchors_1.setHorizontalCenterOffset(200)
则该一级控件在水平方向向右偏移200像素。
在设置一级控件的垂直分界线与主控件的垂直分界线的锚定距离时,锚定距离为正表示一级控件向右偏移,锚定距离为负标识一级控件向左偏移。在设置一级控件的水平分界线与主控件的水平分界线的锚定距离时,锚定距离为正表示一级控件向上偏移,锚定距离为负表示一级控件向下偏移。设置的锚定距离时,一级控件的最大偏移量均使一级控件在主控件界限范围之内。设置一级控件的分界线与主控件的分界线之间的锚定距离,即一级控件在水平方向或垂直方向偏移量的配置项为offset,单位为像素(pixel)。offset包括horizontalCenterOffset和verticalCenterOffset,horizontalCenterOffset为水平方向的偏移量,verticalCenterOffset为垂直方向的偏移量。horizontalCenterOffset和verticalCenterOffset的实现函数原型为:
void setHorizontalCenterOffset(int horizontalCenterOffset);
void setVerticalCenterOffset(int verticalCenterOffset);
方式4的一种特殊情况,为设置一级控件在主控件的中心点,即设置一级控件位于主控件水平分界线和垂直分界线的交点处。如图4a所示,设置控件416在主控件410的中心点,即设置一级控件416的水平分界线与主控件410的水平分界线锚定,锚定距离为0,设置一级控件416的垂直分界线与垂直窗口410的水平分界线锚定,锚定距离为0,代码如下:
label_anchors_1.setHorizontalCenter(main_anchors.horizontalCenter());
label_anchors_1.setVerticalCenter(main_anchors.verticalCenter());
5、一级控件或二级控件的属性还包括边框(margin),边框包括上边框(topMargin),下边框(bottomMargin),左边框(leftMargin)和右边框(rightMargin)。图4b示出了根据本发明又一个实施例的布局控件的方式,如图4b所示,在主控件420中,控件421为一级控件,控件422和控件423为基于一级控件421的二级控件。一级控件421的左边框宽度为g,右边框宽度为h。二级控件422的上边框宽度为c,下边框宽度为d,左边框宽度为e,右边框宽度为f。二级控件423的左边框宽度为i。
先设置一级控件边框的宽度,随后设置一级控件的边框与主控件的边界锚定。一级控件的边框与主控件的边界或分界线锚定是指一级控件的边框线与主控件的边界锚定。设置边框与主控件的边界锚定时,锚定距离为边框线与主控件的边界的距离。设置的锚定距离最小为0,最大不使一级控件及其边框超过主控件所限定的范围。根据本发明的一个实施例,在主控件420中自定义有一级控件421,设置一级控件421的水平分界线与主控件420的水平分界线锚定,锚定距离为0,并设置其左边框的宽度为g,左边框的边框线与主控件的左边界锚定,锚定距离为z,右边框的宽度为h。其中,设置右边框宽度的代码如下:
label_anchors_7.setRightMargin(h);
设置一级控件的位置时,可依据上述多种方式1-5中的一种或多种设置父锚定关系,本发明对设置父锚定关系的方式不作限制。依据上述方法,设置多个一级控件在主控件中的位置。设置完毕所有一级控件在主控件中的位置后,根据二级控件的锚线设置二级控件与一级控件锚定,来设置二级控件在布局窗口中的相对位置。
在主控件中自定义二级控件与在主控件中自定义一级控件的方式相同。新建二级控件并设置新建的二级控件的长和宽,二级控件的形状为直角矩形。初始化锚定系统时,设置二级控件在主控件中的对象指针,以便通过该对象指针设置二级控件在主控件中的相对位置。如图4b所示,在主控件420自定义有基于一级控件421的二级控件422和二级控件423。
随后,根据一个一级控件的位置,设置二级控件与该一级控件的相对位置关系,进而设置多个二级控件在主控件中的位置。在设置二级控件在主控件中的位置时,从在主控件自定义并设置好相对位置关系的多个一级控件中,选择其中一个一级控件进行设置二级控件与该一级控件的相对位置关系。
如图4b所示,选定一级控件421,基于一级控件420的位置,设置二级控件422和二级控件423。设置二级控件与该一级控件的相对位置关系包括步骤:设置二级控件的边框的宽度,即设置二级控件各边框的宽度,边框的宽度无需设置时,默认为0。根据本发明的一个实施例,设置二级控件422的上边框宽度为c,下边框宽度为d,左边框宽度为e,右边框宽度为f。二级控件423的左边框宽度为i。
随后,设置二级控件的边框与该一级控件的边框锚定,和/或设置二级控件的分界线与该一级控件的分界线锚定。设置二级控件的边框与该一级控件的边框锚定包括步骤:设置二级控件停靠在该一级控件的边框;和/或设置二级控件的边框与该一级控件的边框的距离。
设置二级控件的位置时设置的方式包括:
6、设置二级控件停靠在该一级控件的边框,即将二级控件的边框线紧靠于一级控件的边框线,锚定距离为0。根据本发明的一个实施例,如图4b所示,设置二级控件423的左边框线紧靠于一级控件421的右边框线,设置代码如下:
DAnchors<QLabel>rect8(new QLabel("rect8"));
DAnchors<QLabel>rect9(new QLabel("rect9"));
Rect9.setLeftMargin(rect8.rightMargin());
7、设置二级控件的边框与该一级控件的边框的锚定,锚定距离为二级控件的边框线与一级控件的边框线之间的距离。根据本发明的一个实施例,设置二级控件422的右边框线与一级控件421的左边框线之间的锚定距离为j。
8、设置二级控件的分界线与该一级控件的分界线锚定,即设置二级控件的水平分界线与该一级控件的水平分界线锚定,和/或设置二级控件的垂直分界线与该一级控件的垂直分界线锚定。锚定距离为二级控件的水平分界线与该一级控件的水平分界线之间的距离,或二级控件的垂直分界线与该一级控件的垂直分界线之间的距离。图4c示出了根据本发明再一个实施例的布局控件的方式。图4c所示的主控件430中,一级控件431位于主控件430的中心点,一级控件431的右边框宽度为k。基于一级控件431的二级控件432,左边框的宽度为l。设置二级控件432的水平分界线与一级控件431的水平分界线锚定,锚定距离为0。设置二级控件432的垂直平分线与一级控件431的垂直分界线锚定,锚定距离为m。
设置二级控件的相对位置时,可依据上述多种方式6-8中的一种或多种进行设置,本发明对设置二级控件的相对位置的方式不作限制。依据上述方法,设置多个二级控件在主控件中的位置。设置完毕所有二级控件在主控件中的位置后,本发明中还可依据上述设置控件相对位置的方式设置多级控件,包括设置三级控件,四级控件,五级控件等。以三级控件为例,设置三级控件在主控件中的相对位置时,可通过设置三级控件相对于二级控件的相对位置进行设置。其他级别的控件设置的方式依次类推,本发明对设置的控件的级别数不作限制。
执行步骤S340,加载布局窗口,根据控件的尺寸信息和位置关系在布局窗口中显示多个控件。基于主控件的位置和所设置的一级控件的相对位置关系,显示一级控件的位置。根据一级控件的位置和所设置的二级控件的相对位置关系,显示二级控件的位置。重新加载布局窗口的代码如下所示:
pWindow->show();
return a.exec();
本发明中,通过在布局窗口中设置多个控件,初始化锚定系统,锚定系统生成控件的锚线,并在锚定系统中根据锚线设置多个控件之间的位置关系,从而设置控件在布局窗口中的位置关系。在锚定系统中设置控件之间的位置关系时,先设置与布局窗口相同的主控件,随后根据一级控件的锚线设置与主控件锚定,设置一级控件在布局窗口中的位置;以及根据二级控件的锚线设置与一级控件锚定,设置二级控件在布局窗口中的位置。从而能够通过设置二级控件与一级控件的相对位置关系,达到设置二级控件在布局窗口中的位置的目的。二级控件能够在布局窗口发生改变时,随着一级控件的位置改变而变换位置,但不改变其相对于一级控件的位置关系,灵活对控件在布局窗口中的位置进行设置。并进一步的,还可以设置一级控件和二级控件的边框,通过设置边框的宽度从而限定不同控件之间的最近距离,从而满足特殊场景下对控件布局的需求。
在此处所提供的说明书中,说明了大量具体细节。然而,能够理解,本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中,并未详细示出公知的方法、结构和技术,以便不模糊对本说明书的理解。
A8、如A3所述的方法,其中,所述控件还包括边框,所述根据所述一级控件的锚线设置所述一级控件与所述主控件锚定还包括步骤:
设置所述一级控件的边框的宽度,并设置所述一级控件的边框与所述主控件的边界锚定。
A9、如A6所述的方法,其中,所述根据所述二级控件的锚线设置所述二级控件与所述一级控件锚定包括步骤:
设置所述二级控件的边框的宽度;
设置所述二级控件的边框与所述一级控件的边框锚定,和/或设置所述二级控件的分界线与所述一级控件的分界线锚定。
A10、如A9所述的方法,其中,所述设置所述二级控件的边框与所述一级控件的边框锚定包括步骤:
设置所述二级控件停靠在所述一级控件的边框,和/或设置所述二级控件的边框与所述一级控件的边框的距离。
A11、如A8-A11中任一项所述的方法,其中,所述边框包括上边框,下边框,左边框和右边框。
类似地,应当理解,为了精简本公开并帮助理解各个发明方面中的一个或多个,在上面对本发明的示例性实施例的描述中,本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而,并不应将该公开的方法解释成反映如下意图:即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多特征。更确切地说,如下面的权利要求书所反映的那样,发明方面在于少于前面公开的单个实施例的所有特征。因此,遵循具体实施方式的权利要求书由此明确地并入该具体实施方式,其中每个权利要求本身都作为本发明的单独实施例。
本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组间可以布置在如该实施例中所描述的设备中,或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。
本领域那些技术人员可以理解,可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组间组合成一个模块或单元或组间,以及此外可以把它们分成多个子模块或子单元或子组间。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外,可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述,本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外,本领域的技术人员能够理解,尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征,但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如,在下面的权利要求书中,所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
此外,所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此,具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外,装置实施例的在此所述的元素是如下装置的例子:该装置用于实施由为了实施该发明的目的的元素所执行的功能。
这里描述的各种技术可结合硬件或软件,或者它们的组合一起实现。从而,本发明的方法和设备,或者本发明的方法和设备的某些方面或部分可采取嵌入有形媒介,例如软盘、CD-ROM、硬盘驱动器或者其它任意机器可读的存储介质中的程序代码(即指令)的形式,其中当程序被载入诸如计算机之类的机器,并被所述机器执行时,所述机器变成实践本发明的设备。
在程序代码在可编程计算机上执行的情况下,计算设备一般包括处理器、处理器可读的存储介质(包括易失性和非易失性存储器和/或存储元件),至少一个输入装置,和至少一个输出装置。其中,存储器被配置用于存储程序代码;处理器被配置用于根据该存储器中存储的所述程序代码中的指令,执行本发明的设备停机状态的判断方法。
以示例而非限制的方式,计算机可读介质包括计算机存储介质和通信介质。计算机可读介质包括计算机存储介质和通信介质。计算机存储介质存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据,并且包括任何信息传递介质。以上的任一种的组合也包括在计算机可读介质的范围之内。
如在此所使用的那样,除非另行规定,使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例,并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。
尽管根据有限数量的实施例描述了本发明,但是受益于上面的描述,本技术领域内的技术人员明白,在由此描述的本发明的范围内,可以设想其它实施例。此外,应当注意,本说明书中使用的语言主要是为了可读性和教导的目的而选择的,而不是为了解释或者限定本发明的主题而选择的。因此,在不偏离所附权利要求书的范围和精神的情况下,对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围,对本发明所做的公开是说明性的,而非限制性的,本发明的范围由所附权利要求书限定。
Claims (10)
1.一种布局控件的方法,适于在计算设备中执行,所述方法包括:
在布局窗口中设置多个控件,所述多个控件包括一级控件和二级控件,所述控件包括尺寸信息;
初始化锚定系统,在所述锚定系统中生成所述控件的锚线;
在所述锚定系统中根据所述锚线设置多个控件之间的位置关系;以及
加载所述布局窗口,根据所述控件的尺寸信息和位置关系在所述布局窗口中显示多个控件。
2.如权利要求1所述的方法,其中,所述多个控件包括主控件,所述初始化锚定系统包括步骤:
在所述锚定系统中,设置与所述布局窗口相对应的主控件,所述主控件的尺寸和所述布局窗口相同。
3.如权利要求1或2所述的方法,其中,所述在锚定系统中根据所述锚线设置多个控件之间的位置关系包括步骤:
根据所述一级控件的锚线设置所述一级控件与所述主控件锚定,来设置所述一级控件在所述布局窗口中的相对位置。
4.如权利要求3所述的方法,其中,所述根据所述一级控件的锚线设置所述一级控件与所述主控件锚定包括步骤:
设置所述一级控件的锚线与所述主控件的边界或者分界线锚定,所述主控件的分界线包括水平分界线和垂直分界线。
5.如权利要求4所述的方法,其中,所述设置所述一级控件的锚线与所述主控件的边界锚定包括步骤:
设置所述一级控件停靠在所述主控件的边界,和/或设置所述一级控件的锚线与所述主控件的边界的距离。
6.如权利要求3所述的方法,其中,所述方法还包括:
根据所述二级控件的锚线设置所述二级控件与所述一级控件锚定,来设置所述二级控件在所述布局窗口中的相对位置。
7.如权利要求1-6中任一项所述的方法,其中,所述控件的锚线包括边线,和分界线,所述边界包括上边线,下边线,左边线和右边线,所述分界线包括水平分界线和垂直分界线。
8.如权利要求1-7中任一项所述的方法,其中,所述尺寸信息包括所述控件的长和宽,所述在布局窗口中设置多个控件包括步骤:
新建多个控件,设置多个控件的长和宽。
9.一种计算设备,包括:
一个或多个处理器;
存储器;以及
一个或多个程序,其中所述一个或多个程序存储在所述存储器中并被配置为由所述一个或多个处理器执行,所述一个或多个程序包括用于执行根据权利要求1至8所述的方法中的任一方法的指令。
10.一种存储一个或多个程序的计算机可读存储介质,所述一个或多个程序包括指令,所述指令当由计算设备执行时,使得所述计算设备执行根据权利要求1至8所述的方法中的任一方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311606923.7A CN117389675A (zh) | 2021-01-04 | 2021-01-04 | 一种布局控件的方法,计算设备及存储介质 |
Applications Claiming Priority (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110002902.9A CN112732385B (zh) | 2021-01-04 | 2021-01-04 | 一种布局控件的方法,计算设备及存储介质 |
CN202311606923.7A CN117389675A (zh) | 2021-01-04 | 2021-01-04 | 一种布局控件的方法,计算设备及存储介质 |
Related Parent Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110002902.9A Division CN112732385B (zh) | 2021-01-04 | 2021-01-04 | 一种布局控件的方法,计算设备及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN117389675A true CN117389675A (zh) | 2024-01-12 |
Family
ID=75589517
Family Applications (2)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202311606923.7A Pending CN117389675A (zh) | 2021-01-04 | 2021-01-04 | 一种布局控件的方法,计算设备及存储介质 |
CN202110002902.9A Active CN112732385B (zh) | 2021-01-04 | 2021-01-04 | 一种布局控件的方法,计算设备及存储介质 |
Family Applications After (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110002902.9A Active CN112732385B (zh) | 2021-01-04 | 2021-01-04 | 一种布局控件的方法,计算设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (2) | CN117389675A (zh) |
Family Cites Families (15)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8578267B2 (en) * | 2006-09-28 | 2013-11-05 | Hewlett-Packard Development Company, L.P. | Graphic assembly layout with maximum page coverage and minimum content removal |
US20140053063A1 (en) * | 2012-08-14 | 2014-02-20 | Microsoft Corporation | User interface control framework for stamping out controls using a declarative template |
US10387547B2 (en) * | 2014-09-09 | 2019-08-20 | Intentional Software Corporation | Layout engine for creating a visual layout tree for a document |
CN104699376A (zh) * | 2015-04-03 | 2015-06-10 | 上海航天测控通信研究所 | 控件自动布局方法 |
US10185797B2 (en) * | 2015-06-15 | 2019-01-22 | Cadence Design Systems, Inc. | Methods and devices for extraction of MEMS structures from a MEMS layout |
CN105511725A (zh) * | 2015-12-09 | 2016-04-20 | 网易(杭州)网络有限公司 | 界面中控件的显示方法及装置 |
CN106528736A (zh) * | 2016-10-27 | 2017-03-22 | 中企动力科技股份有限公司 | 一种拖拽页面组件时显示对齐线的方法及装置 |
CN108363572B (zh) * | 2018-01-03 | 2021-06-04 | 网易(杭州)网络有限公司 | 一种ui自动布局的方法 |
CN109308199A (zh) * | 2018-09-04 | 2019-02-05 | 广州优视网络科技有限公司 | 一种控件集合的显示方法、装置及终端设备 |
CN109614177B (zh) * | 2018-10-31 | 2022-03-01 | 创新先进技术有限公司 | 选择组件及其控制方法 |
CN112148157B (zh) * | 2019-06-28 | 2022-07-01 | 杭州海康威视数字技术股份有限公司 | 用于图形用户界面的焦点移动方法和焦点移动装置 |
CN111061473A (zh) * | 2019-12-16 | 2020-04-24 | 新奥数能科技有限公司 | 用于快速构建页面的可视化组件编辑方法和装置 |
CN112114786B (zh) * | 2020-09-23 | 2024-05-14 | 统信软件技术有限公司 | 一种编辑器的实现方法、计算设备及可读存储介质 |
CN112019820B (zh) * | 2020-10-19 | 2021-01-12 | 武汉中科通达高新技术股份有限公司 | 界面生成方法和装置 |
CN112000417B (zh) * | 2020-10-27 | 2021-05-28 | 统信软件技术有限公司 | 一种窗口展示效果的控制方法及计算设备 |
-
2021
- 2021-01-04 CN CN202311606923.7A patent/CN117389675A/zh active Pending
- 2021-01-04 CN CN202110002902.9A patent/CN112732385B/zh active Active
Also Published As
Publication number | Publication date |
---|---|
CN112732385A (zh) | 2021-04-30 |
CN112732385B (zh) | 2023-12-15 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US7949948B2 (en) | Constraint and rule-based page layout | |
US7477263B2 (en) | Relayout of all or part of a graph in association with a change in state of a graph element | |
JP5113909B2 (ja) | 相対位置に基く制御によるページ上のグラフィックスオブジェクトの配置 | |
US8042039B2 (en) | Populating a dynamic page template with digital content objects according to constraints specified in the dynamic page template | |
US20140304671A1 (en) | Manipulating parameterized cell devices in a custom layout design | |
JP6265451B2 (ja) | オブジェクト管理装置、思考支援装置、オブジェクト管理方法、及びプログラム | |
JP2001036732A (ja) | 領域内への画像の自動配置方法及び装置 | |
CN105740213A (zh) | 一种演示文稿模板提供方法及装置 | |
CN111258575A (zh) | 一种页面布局处理方法及装置 | |
CN113535650B (zh) | 一种文件命名方法及计算设备 | |
RU2386171C2 (ru) | Выравнивание в списках, сформированных по шаблону | |
WO2011031257A1 (en) | Generating graphic object collages | |
CN113311983A (zh) | 一种基于地址栏的交互方法及计算设备 | |
US20130073952A1 (en) | Methods and Apparatus for Comic Creation | |
CN112799565A (zh) | 一种内容列表展示方法及计算设备 | |
US10963141B2 (en) | Smart multi-touch layout control for mobile devices | |
CN112732385B (zh) | 一种布局控件的方法,计算设备及存储介质 | |
CN114730347A (zh) | 用于创建物理空间的布局的计算机实现的技术 | |
CN104252499A (zh) | 页面划分的方法及电子显示装置 | |
US20150277729A1 (en) | Electronic whiteboard device, input support method of electronic whiteboard, and computer-readable recording medium | |
CN111752620A (zh) | 内核模块的处理方法和加载方法 | |
CN112396569B (zh) | 一种对图像进行数据增强的方法 | |
CN118535045A (zh) | 打开文件的方法、创建项目快捷方式的方法及电子设备 | |
CN114510306A (zh) | 一种任务栏显示方法、装置及计算设备 | |
CN115202553A (zh) | 白板应用的控制方法、装置和电子设备 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |