CN114385061A - 操作方法、装置、电子设备和计算机可读存储介质 - Google Patents

操作方法、装置、电子设备和计算机可读存储介质 Download PDF

Info

Publication number
CN114385061A
CN114385061A CN202210031940.1A CN202210031940A CN114385061A CN 114385061 A CN114385061 A CN 114385061A CN 202210031940 A CN202210031940 A CN 202210031940A CN 114385061 A CN114385061 A CN 114385061A
Authority
CN
China
Prior art keywords
control
sub
response
sliding
controls
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.)
Granted
Application number
CN202210031940.1A
Other languages
English (en)
Other versions
CN114385061B (zh
Inventor
刘恒
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
BOE Technology Group Co Ltd
Original Assignee
BOE Technology Group Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by BOE Technology Group Co Ltd filed Critical BOE Technology Group Co Ltd
Priority to CN202210031940.1A priority Critical patent/CN114385061B/zh
Publication of CN114385061A publication Critical patent/CN114385061A/zh
Priority to PCT/CN2023/071499 priority patent/WO2023134655A1/zh
Priority to US18/701,051 priority patent/US20240345717A1/en
Application granted granted Critical
Publication of CN114385061B publication Critical patent/CN114385061B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

一种操作方法、装置、电子设备和计算机可读存储介质。该操作方法包括：获取对第一控件中的第一子控件进行的第一移动操作，第一子控件位于第一控件的区域范围中；响应于第一移动操作满足第一控件的第一响应条件且满足第一子控件的第二响应条件，由第一控件响应第一移动操作；以及响应于第一移动操作不满足第一响应条件但满足第二响应条件，由第一子控件响应第一移动操作而产生视觉上的移动。该操作方法能够缓解对第一控件进行控制和对第一子控件进行控制存在操作冲突的问题。

Description

操作方法、装置、电子设备和计算机可读存储介质
技术领域
本公开的实施例涉及一种操作方法、装置、电子设备和计算机可读存储介质。
背景技术
随着电子技术和互联网技术的发展，电子设备提供的功能越来越丰富，使得人们的生活越来越智能化。例如，智慧城市、智慧园区、智慧企业等技术是运用物联网、云计算、大数据、空间信息集成等新一代信息技术，促进城市、园区或者企业等进入智慧化的服务、管理、建设的模式。
智慧城市、智慧园区、智慧企业等技术往往通过触摸屏向用户展示数据信息或者图像信息。在触摸屏上往往显示多种控件，通过控件使得用户和触摸屏进行交互。
发明内容
本公开至少一个实施例提供一种操作方法，包括：获取对第一控件中的第一子控件进行的第一移动操作，第一子控件位于第一控件的区域范围中；响应于第一移动操作满足第一控件的第一响应条件且满足第一子控件的第二响应条件，由第一控件响应第一移动操作；以及响应于第一移动操作不满足第一响应条件但满足第二响应条件，由第一子控件响应第一移动操作而产生视觉上的移动。
例如，在本公开一实施例提供的操作方法中，第一控件包括列表控件，第一子控件包括拖拽控件，拖拽控件为可拖动的控件。
例如，在本公开一实施例提供的操作方法中，第一控件的区域范围内包括N个子控件，N为大于1的整数，N个子控件依次排列在第一控件中，第一子控件为N个子控件之一。
例如，在本公开一实施例提供的操作方法中，第一控件包括列表控件，响应于第一移动操作满足第一控件的第一响应条件且满足第一子控件的第二响应条件，由第一控件响应第一移动操作，包括：响应于第一移动操作满足第一响应条件且满足第二响应条件，列表控件使得N个子控件在视觉上在列表控件中滚动。
例如，在本公开一实施例提供的操作方法中，第一移动操作包括滑动操作。
例如，在本公开一实施例提供的操作方法中，第一响应条件为所述第二响应条件的子集。
例如，在本公开一实施例提供的操作方法中，第二响应条件包括：滑动操作的滑动距离大于距离阈值，第一响应条件包括：滑动操作的滑动距离大于距离阈值，并且滑动操作的滑动方向在预设范围内。
例如，在本公开一实施例提供的操作方法中，第一响应条件包括：滑动操作的滑动距离大于距离阈值，并且滑动操作的滑动方向在预设范围内，第二响应条件包括：滑动操作的滑动距离大于距离阈值，并且滑动操作的滑动方向在预设范围外。
例如，在本公开一实施例提供的操作方法中，滑动操作的滑动方向在预设范围内，包括：滑动操作的滑动方向与第一控件的延伸方向之间的夹角在预设范围内。
例如，在本公开一实施例提供的操作方法中，延伸方向为水平方向，响应于滑动操作在水平方向上滑动的第一距离大于滑动操作在竖直方向上滑动的第二距离，滑动方向与第一控件的延伸方向之间的夹角在预设范围内；或者延伸方向为竖直方向，响应于滑动操作在水平方向上滑动的第一距离小于滑动操作在竖直方向上滑动的第二距离，滑动方向与第一控件的延伸方向之间的夹角在预设范围内，水平方向与竖直方向垂直。
例如，在本公开一实施例提供的操作方法中，响应于第一移动操作不满足第一响应条件但满足第二响应条件，由第一子控件响应第一移动操作而产生视觉上的移动，包括：响应于第一移动操作不满足第一响应条件但满足第二响应条件，生成拖拽控件的辅助控件；以及辅助控件跟随第一移动操作移动。
例如，在本公开一实施例提供的操作方法中，辅助控件根据第一移动操作移动到第一控件的区域范围之外。
例如，在本公开一实施例提供的操作方法中，第一控件和第一子控件显示于显示页面，显示页面还包括位于第一控件的区域范围之外的第二控件，第一子控件包括显示窗口并且显示图像数据，方法还包括：响应于辅助控件移动到第二控件的区域范围移动操作停止，第一子控件向第二控件提供图像数据，并且由第二控件的显示窗口显示图像数据。
例如，在本公开一实施例提供的操作方法中，第一控件的区域范围内还包括第二子控件，该方法还包括：获取对第二子控件进行的第二移动操作，第二移动操作用于将第二子控件由第一位置调整到第二位置；以及由第二位置对应的子控件显示第二子控件显示的图像数据。
例如，在本公开一实施例提供的操作方法中，第二移动操作包括对第二子控件进行的按压操作以及对第二位置的选择操作，按压操作的时长大于预设时长。
例如，在本公开一实施例提供的操作方法中，显示页面包括第一显示区域、第二显示区域和第三显示区域，第一控件位于第一显示区域中，第二显示区域包括多个第二控件，每个第二控件用于显示来自多个子控件之一的图像数据，第三显示区域配置为显示至少一个排布策略，每个排布策略指示一种用于对多个第二控件进行排布的排布方式，或者指示多个第二控件分别对应的子控件，以由每个第二控件显示来自与第二控件对应的子控件的图像数据。
例如，在本公开一实施例提供的操作方法中，第三显示区域还配置为显示至少一个显示策略，显示策略指示排布策略与时间段的对应关系，以在每个时间段内显示与每个时间段对应的排布策略。
例如，在本公开一实施例提供的操作方法中，第一控件、第一子控件和第二控件为基于跨平台界面开发框架获得或者基于操作系统获得。
例如，在本公开一实施例提供的操作方法中，第一控件为拖拽控件，所述第一子控件为列表控件，其中，由所述第一控件响应所述第一移动操作，包括：所述拖拽控件跟随所述第一移动操作而移动，由所述第一子控件响应所述第一移动操作而产生视觉上的移动，包括：所述列表控件中的子元素在视觉上在所述列表控件中滚动。
本公开至少一个实施例提供一种操作装置，包括：获取单元，配置为获取对第一控件中的第一子控件进行的第一移动操作，第一子控件位于第一控件的区域范围中；第一响应单元，配置为响应于第一移动操作满足第一控件的第一响应条件且满足第一子控件的第二响应条件，由第一控件响应第一移动操作；第二响应单元，配置为响应于第一移动操作不满足第一响应条件但满足第二响应条件，由第一子控件响应第一移动操作而产生视觉上的移动。
本公开至少一个实施例提供一种电子设备，包括处理器；存储器，包括一个或多个计算机程序指令；一个或多个计算机程序指令被存储在存储器中由处理器执行时实现本公开任一实施例提供的操作方法。
本公开至少一个实施例提供一种计算机可读存储介质，非暂时性存储有计算机可读指令，当计算机可读指令由处理器执行时可以实现本公开任一实施例提供的操作方法。
附图说明
为了更清楚地说明本公开实施例的技术方案，下面将对实施例的附图作简单地介绍，显而易见地，下面描述中的附图仅仅涉及本公开的一些实施例，而非对本公开的限制。
图1A示出了本公开至少一实施例提供的一种操作方法的流程图；
图1B示出了本公开至少一个实施例提供的第一控件和第一子控件的示意图；
图1C示出了本公开至少一个实施例提供的滑动操作的滑动方向与第一控件的延伸方向之间的夹角在预设范围内的示意图；
图1D示出了本公开至少一个实施例提供的另一种第一控件和第一子控件的示意图；
图1E示出了本公开至少一个实施例提供的图1B的示例中N个子控件在视觉上在第一控件中滑动而产生的结果示意图；
图2A示出了本公开至少一个实施例提供的辅助控件跟随第一移动操作移动的示意图；
图2B示出了本公开至少一个实施例提供的第一控件和第一子控件响应第一移动操作的示意图；
图3示出了本公开至少一个实施例提供的另一操作方法的流程图；
图4示出了本公开至少一个实施例提供的一种操作装置的示意框图；
图5示出了本公开至少一个实施例提供的一种电子设备的示意框图；
图6示出了本公开至少一个实施例提供的另一种电子设备的示意框图；以及
图7示出了本公开至少一个实施例提供的一种计算机可读存储介质的示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例的附图，对本公开实施例的技术方案进行清楚、完整地描述。显然，所描述的实施例是本公开的一部分实施例，而不是全部的实施例。基于所描述的本公开的实施例，本领域普通技术人员在无需创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
除非另外定义，本公开使用的技术术语或者科学术语应当为本公开所属领域内具有一般技能的人士所理解的通常意义。本公开中使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。同样，“一个”、“一”或者“该”等类似词语也不表示数量限制，而是表示存在至少一个。“包括”或者“包含”等类似的词语意指出现该词前面的元件或者物件涵盖出现在该词后面列举的元件或者物件及其等同，而不排除其他元件或者物件。“连接”或者“相连”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电性的连接，不管是直接的还是间接的。“上”、“下”、“左”、“右”等仅用于表示相对位置关系，当被描述对象的绝对位置改变后，则该相对位置关系也可能相应地改变。
随着电子设备提供的功能越来越丰富，电子设备与用户的交互也越来越多。为了使得用户和电子设备的交互更加便捷，控件的种类也越来越丰富。例如，有些控件可以被移动，有些控件可以被点击等。又例如，控件中可以包括子控件，用户可以分别操作控件和子控件。但是，在控件中包括子控件的情形中，对控件和子控件进行的操作容易产生冲突。例如，用户想要对控件进行控制，而用户的操作却被子控件获取而导致对子控件进行了控制而非对控件进行了控制，严重影响了用户体验。
本公开至少一个实施例提供一种操作方法、装置、电子设备和计算机可读存储介质。该操作方法包括：获取对第一控件中的第一子控件进行的第一移动操作，其中，所述第一子控件位于所述第一控件的区域范围中；响应于所述第一移动操作满足所述第一控件的第一响应条件且满足所述第一子控件的第二响应条件，由所述第一控件响应所述第一移动操作；以及响应于所述第一移动操作不满足所述第一响应条件但满足所述第二响应条件，由所述第一子控件响应所述第一移动操作而产生视觉上的移动。该操作方法能够缓解对第一控件进行控制和对第一子控件进行控制存在操作冲突的问题。
需要说明的是，本公开的提供的实施例可以应用于任何对控件进行控制的场景，而不仅限于下文中所提及的应用场景。也即，本公开对本公开的实施例的应用场景不作限定。
图1A示出了本公开至少一实施例提供的一种操作方法的流程图。
如图1A所示，该方法可以包括步骤S10～S30。
步骤S10：获取对第一控件中的第一子控件进行的第一移动操作，第一子控件位于第一控件的区域范围中。
步骤S20：响应于第一移动操作满足第一控件的第一响应条件且满足第一子控件的第二响应条件，由第一控件响应第一移动操作。
步骤S30：响应于第一移动操作不满足第一响应条件但满足第二响应条件，由第一子控件响应第一移动操作而产生视觉上的移动。
对于步骤S10，例如，第一控件可以是列表控件，第一子控件包括拖拽控件，拖拽控件为可拖动的控件。例如，第一移动操作可以是滑动操作，列表控件可以响应滑动操作使得拖拽控件在视觉上在列控件中滚动，拖拽控件也可以响应滑动操作而被拖拽到其他位置。由于列表控件和拖拽控件都可以响应滑动操作而容易导致操作冲突，例如，用户想要控制列表控件反而是拖拽控件被控制，或者用户想要控制拖拽控件但是反而是列表控件被控制。
又例如，第一控件可以是拖拽控件，第一子控件可以是接收点击操作的点击控件。例如，拖拽控件可以响应点击操作而被拖拽，点击控件可以响应点击操作而被移动。由于拖拽控件和点击控件都可以响应点击操作而容易导致操作冲突。
又例如，第一控件为拖拽控件，第一子控件为列表控件。拖拽控件响应于滑动操作被拖拽到其他位置，列表控件响应于滑动操作使得列表控件中的多个元素滚动。在该情形中，第一控件和第一子控件都可以响应滑动操作而容易导致操作冲突。
本公开提供的实施例能够缓解第一控件和第一子控件之间存在的操作冲突的问题。
图1B示出了本公开至少一个实施例提供的第一控件和第一子控件的示意图。下面结合图1B对图1A所示的操作方法进行阐述。
如图1B所示，子控件111、子控件112、子控件113以及子控件114位于控件110的区域范围中。控件110为第一控件的示例，子控件111、子控件112、子控件113以及子控件114任意一个都可以作为第一子控件。在本公开的实施例中，控件的区域范围可以是指控件在显示页面中实际的显示区域。例如，控件110为列表控件，控件110的区域范围为控件110的视口(ViewPort)，即列表控件的实际显示区域。控件110本身容纳的子控件的数量通常多于视口中显示出的子控件的数量。
需要理解的是，虽然图1B中示出了4个子控件，但并不意味着控件的区域范围中只能包含4个子控件。实际上，在本公开的实施例中，控件的区域范围中可以包括N个子控件，N为大于等于1的整数。由于控件110自身大小(例如，长度)的限制，控件110只能在区域范围中显示出N个子控件中的部分，例如只显示出1个、2个、3个子控件，N为大于等于1的整数。本公开不限定控件110自身大小可以允许控件110的区域范围中可以显示的子控件的数量，以及子控件的总数量。
在图1B的示例中，控件110例如为列表控件，子控件111、子控件112、子控件113以及子控件114中的每个例如为拖拽控件。即，列表的多个子元素为多个拖拽控件。子控件111、子控件112、子控件113以及子控件114可以被拖动到控件110区域范围之外的区域。
在本公开的另一些实施例中，例如控件110为拖拽控件，子控件111、子控件112、子控件113以及子控件114中的每个例如为列表控件。即，拖拽控件的多个子元素为多个列表控件。在该情形中，拖拽控件即控件110例如可以被拖拽到目标区域，并且拖拽控件和作为子元素的列表控件可以根据目标区域的大小自适应地调整自身的大小，以与目标区域的大小适配。
在本公开的一些实施例中，N个子控件可以依次排列在第一控件中。
例如，N个子控件可以沿第一控件的延伸方向依次排列。如图1B所示，控件110沿X方向延伸，则N个子控件(例如，子控件111、子控件112、子控件113以及子控件114)在控件的区域范围内沿X方向依次排列。按照控件的延伸方向依次排列可以简洁并且直观地显示较多的子控件。
在本公开的另一些实施例中，N个子控件也可以是按照预设的排列图案排列于控件中，这样可以提高美观度和趣味性。
对于步骤S10，例如第一移动操作为滑动操作。例如，用户可以在第一控件的区域范围中进行滑动操作。例如，该操作方法应用于触摸屏，触摸屏可以获取对控件110中任意一个子控件进行的滑动操作。如图1B所示，例如获取对子控件112进行的滑动操作。
如上文所述，第一移动操作例如也可以是点击操作等，也可以是其他的操作，本公开对第一移动操作不做限定。
对于步骤S20和步骤S30，对于第一移动操作为滑动操作的实施例，例如，第一响应条件可以是第二响应条件的子集。例如，第二响应条件为滑动操作的滑动距离大于距离阈值。第一响应条件为滑动操作的滑动距离大于距离阈值，并且滑动操作的滑动方向在预设范围内。即，当第一移动操作的滑动方向在预设范围内，并且滑动距离大于距离阈值时，由第一控件响应第一移动操作，当第一移动操作的滑动方向不在预设范围内，并且滑动距离大于距离阈值时，由第一子控件响应移动操作。
在本公开的另一些实施例中，第一响应条件和第二响应条件可以是两个相互独立的条件，例如第一响应条件为移动操作的时长小于预设时长，第二响应条件为滑动距离大于距离阈值。即，当第一移动操作的时长小于预设时长，并且滑动距离大于距离阈值时，由第一控件响应第一移动操作，当第一移动操作的时长大于等于预设时长，并且滑动距离大于距离阈值时，由第一子控件响应移动操作。
在本公开的另一些实施例中，第一响应条件包括：滑动操作的滑动距离大于距离阈值，并且滑动操作的滑动方向在预设范围内。第二响应条件包括：滑动操作的滑动距离大于距离阈值，并且滑动操作的滑动方向在预设范围外。例如，第一响应条件为滑动操作的滑动距离大于距离阈值，并且滑动操作的滑动方向与第一控件的延伸方向之间的夹角在预设范围内，第二响应条件为滑动操作的滑动距离大于距离阈值，并且滑动操作的滑动方向与第一控件的延伸方向之间的夹角在预设范围外。
本领域技术人员可以根据实际场景需要来设定第一响应条件和第二响应条件，本公开在此不进行一一举例说明。
在本公开的一些实施例中，通过设定第二响应条件为滑动操作的滑动距离大于距离阈值能够防止手指抖动等操作导致的误判，提高响应的准确性。
在本公开的一些实施例中，距离阈值例如可以是18个像素的距离。当滑动距离大于18个像素的距离时，确定滑动操作产生。
例如，当触摸屏获取到的针对子控件112的滑动操作的滑动距离大于距离阈值，并且滑动方向在预设范围内时，由控件110响应该滑动操作；以及当触摸屏获取到的针对子控件112的滑动操作的滑动距离小于或者等于距离阈值，并且滑动方向不在预设范围内时，由子控件112响应该滑动操作。
距离阈值和预设范围可以是本领域技术人员根据实际需求而设定的，本公开不在限定。
在本公开的一些实施例中，滑动操作的滑动方向在预设范围内，包括：滑动操作的滑动方向与第一控件的延伸方向之间的夹角在预设范围内。
图1C示出了本公开至少一个实施例提供的滑动操作的滑动方向与第一控件的延伸方向之间的夹角在预设范围内的示意图。
如图1C所示，第一控件的延伸方向为图1B中的X方向。预设范围例如可以是[0°，45°]、[-45°，0°]、[135°，180°]以及[-180°，-135°]。例如，当滑动操作的滑动方向在图1C中S1所示的范围内时，由控件110响应第一移动操作。又例如，当滑动操作的滑动方向在图1C中S2所示的范围内时，由第一移动操作针对的子控件响应该第一移动操作。
在本公开的一些实施例中，例如延伸方向为水平方向，响应于滑动操作在水平方向上滑动的第一距离大于滑动操作在竖直方向上滑动的第二距离，滑动方向与第一控件的延伸方向之间的夹角在预设范围内。水平方向例如为图1B和图1C所示的X方向，竖直方向为与X方向垂直的Y方向。如图1B所示，当滑动操作在X方向上滑动的距离dX1大于滑动操作在Y方向上滑动的距离dY1时，确定滑动方向与第一控件之间的夹角在预设范围内。距离dX1为第一距离的示例，距离dY1为第二距离的示例。
又例如，若延伸方向为竖直方向，响应于滑动操作在水平方向上滑动的第一距离小于滑动操作在竖直方向上滑动的第二距离，滑动方向与第一控件的延伸方向之间的夹角在预设范围内。
图1D示出了本公开至少一个实施例提供的另一种第一控件和第一子控件的示意图。
如图1D所示，该示意图包括控件120和子控件121、子控件122、子控件123和子控件124等。控件120为第一控件的另一示例，子控件121、子控件122、子控件123和子控件124为第一子控件的另一些示例。
如图1D所示，控件120的延伸方向为竖直方向，例如该竖直方向为Y方向，与Y方向垂直的方向为水平方向。若滑动操作在水平方向上滑动的距离dX2小于滑动操作在Y方向上滑动的距离dY2时，滑动方向与控件120的延伸方向之间的夹角在预设范围内。
通过比较竖直方向和水平方向的移动距离能够较容易地判断滑动方向与第一控件的延伸方向之间的夹角是否在预设范围内。
在本公开的一些实施例中，例如可以根据滑动操作的起始点的坐标和滑动操作的终止点的坐标来计算分别在X方向和Y方向上的滑动距离。
在本公开的一些实施例中，步骤S20可以包括：响应于第一移动操作满足第一响应条件且满足第二响应条件，列表控件使得第一子控件在视觉上在列表控件中滚动。
例如，如图1B和图1D所示，响应于对子控件112或者子控件122执行的第一移动操作满足第一响应条件和第二响应条件，N个子控件在视觉上在列表控件中滚动。
图1E示出了本公开至少一个实施例提供的图1B的示例中N个子控件在视觉上在列表控件中滚动而产生的结果示意图。
例如，响应于对图1B中的子控件113进行沿X轴负方向的移动操作，多个子控件在第一控件110即列表控件的区域范围中滚动，如图1E所示，最终在控件110的区域范围中显示子控件114～子控件117。
列表控件使得N个子控件在视觉上在列表控件中滚动，包括：列表控件根据移动操作的移动距离，计算得到位于区域范围内的多个目标子控件，以及确定多个目标子控件每个在区域范围内的显示位置，并且在显示位置进行渲染以显示对应的目标子控件。
例如，根据控件110、多个子控件的坐标和以及移动距离来计算得到区域范围内的多个目标子控件。例如，根据移动操作的移动距离d(d>0)，计算得到子控件的坐标值的变化量为a×d，根据控件110的端点的坐标值和每个子控件的坐标值的变化量，确定位于控件110区域范围内的目标子控件。例如，在图1B所示的情景中，假设a等于2，控件110端点A在X方向上坐标值为10，端点B在X方向上坐标值为40，响应于对子控件113进行沿X负方向进行的滑动操作的滑动距离d为6cm(大于距离阈值)，每个子控件的X方向上的坐标值减少2×6cm，即减少12cm。在每个子控件的坐标值被更新后，确定子控件114～子控件117显示于控件110的区域范围内，并且坐标值更新后，子控件114～子控件117在区域范围内的显示位置。然后，在每个显示位置渲染得到对应的子控件114～子控件117，最终得到图1E所示的显示结果。例如可以利用2D向量图形处理函数库(SKIA)引擎在每个显示位置渲染得到对应的子控件114～子控件117。
在本公开的一些实施例中，子控件包括拖拽控件，步骤S30可以包括：响应于第一移动操作不满足第一响应条件但满足第二响应条件，生成拖拽控件的辅助控件；以及辅助控件跟随第一移动操作移动。
在本公开的一些实施例中，辅助控件的显示样式可以与第一子控件的显示样式相同，或者辅助控件的显示样式可以与第一子控件的显示样式不相同。
在本公开的一些实施例中，例如第一子控件可以是基于跨平台界面开发框架获得。例如，第一子控件为拖拽控件，拖拽控件可以是Flutter框架提供的Draggable系列组件。在Flutter框架中，Draggable组件有2个必须填写的参数，一个是child参数，child参数用于指示子控件，另一个是feedback参数，feedback参数指示拖动时跟随移动的组件，即辅助控件。在拖动时，可以使用childWhenDragging参数对辅助控件的显示样式进行设定。
图2A示出了本公开至少一个实施例提供的辅助控件跟随第一移动操作移动的示意图。
如图2A所示，显示页面200包括控件110，控件110的视口显示子控件111、子控件112、子控件113和子控件114。控件110显示于第一显示区域210(图2A中虚线框出的区域为第一显示区域)中，控件110的区域范围是指图2A中实线框出的包含子控件111、子控件112、子控件113和子控件114的区域。
例如，手指在触摸屏上对子控件112进行滑动操作，并且滑动操作不在滑动方向的预设范围内，则由子控件112响应该移动操作。例如，子控件112响应该移动操作而生成辅助控件1121。
如图2A所示，例如，辅助控件1121跟随手指的移动而移动，例如，辅助控件1121可以显示于手指所在的位置。
在本公开的一些实施例中，辅助控件根据第一移动操作移动到第一控件的区域范围之外。如图2A所示，例如辅助控件1121被拖拽到第一控件110区域范围之外的位置。
在本公开的一些实施例中，例如，若滑动操作不满足第一响应条件但满足第二响应条件，则由子控件直接获取控制权以响应该滑动操作，若滑动操作满足第一响应条件且满足第二响应条件，则子控件不获取控制，在滑动一定距离之后，由于子控件仍然不获取控制权，则将控制权交给控件，从而实现由控件响应该滑动操作。
在本公开的一些实施例中，第一控件和第一子控件显示于显示页面，显示页面还包括位于第一控件的区域范围之外的第二控件，第一子控件包括显示窗口并且显示图像数据。如图1A所示，在该实施例中，操作方法还可以包括步骤S40。
步骤S40：响应于辅助控件移动到第二控件的区域范围移动操作停止，第一子控件向第二控件提供图像数据，并且由第二控件的显示窗口显示图像数据。
如图2A所示，第一控件和第一子控件显示于显示页面200中，显示页面200还包括位于控件110之外的第二控件130。子控件112包括显示窗口以显示图像数据。
若辅助控件1121移动到第二控件130的区域范围内时，移动操作停止，则子控件112向第二控件130提供该图像数据，使得第二控件130的显示窗口显示该图像数据。
例如，第二控件130的显示窗口的显示面积大于子控件112的显示窗口的显示面积，用于对图像数据进行放大显示，以便于观察。
通过辅助控件跟随移动操作移动到第二控件的区域范围内，可以在视觉上直观地感受到子控件被移动以及被移动到的位置，从而能够及时地停止移动操作，使得在视觉上子控件被准确地移动到目标位置(即，第二控件所在的位置)。
在本公开的另一些实施例中，例如，第一控件为拖拽控件，拖拽控件的区域范围内包括多个子控件，每个子控件例如为列表控件。在该实施例中，响应于第一移动操作满足第一响应条件且满足第二响应条件，第一控件即拖拽控件跟随第一移动操作而移动；响应于第一移动操作不满足第一响应条件且满足第二响应条件，第一子控件即列表控件中的子元素在视觉上在列表控件中滚动。
图2B示出了本公开至少一个实施例提供的第一控件和第一子控件响应第一移动操作的示意图。
如图2B所示，拖拽控件310和列表控件311～314显示于显示页面300中。拖拽控件310为第一控件的示例，列表控件311～314中的任一可以是第一子控件的示例。
在图2B所示的示例中，列表控件311～314以卷轴的方式显示，但是本公开不限定为该卷轴方式，例如列表控件包括滑动条，以滑动条的方式展示列表控件。
如图2B所示，显示页面300包括显示区域301和显示区域302。在未对拖拽控件310和列表控件311～314进行移动操作之前，如图2B所示，拖拽控件310位于显示区域301，列表控件311～314依次排列在拖拽控件310的区域范围内。
在该实施例中，例如，拖拽控件310的第一响应条件为滑动操作的滑动方向图1C所示的[45°，90°]范围内，并且滑动距离大于预设距离；列表控件311～314的第二响应条件为滑动距离大于预设距离。
例如，对列表控件312进行滑动操作，若滑动操作的滑动方向在图1C所示的[45°，90°]范围内，并且滑动距离大于预设距离，则由拖拽控件310响应该滑动操作而移动。例如，拖拽控件310跟随滑动操作由显示区域301移动到显示区域302。
在本公开的一些实施例中，显示区域301和显示区域302的显示面积不相同，拖拽控件310和列表控件311～314可以根据显示区域301或者显示区域302的显示面积自适应第调整自身大小。例如，当拖拽控件310被移动至显示区域302时，拖拽控件310和列表控件311～314相对于在显示区域301时被放大。
例如，若滑动操作的滑动方向不在图1C所示的[45°，90°]范围内，并且滑动距离大于预设距离，则由滑动操作针对的列表控件响应该滑动操作。
例如，在拖拽控件310被移动到显示区域302之后，对列表控件313进行了滑动操作，针对列表控件313进行的滑动操作的滑动方向不在图1C所示的[45°，90°]范围内，并且滑动距离大于预设距离，则由列表控件313响应该滑动操作。例如，如图2B所示，在显示区域302中对列表控件313进行了图1C所示的Y轴负方向的滑动操作，并且滑动距离大于预设距离，则由列表控件313响应该滑动操作。
在该实施例中列表控件响应滑动操作而产生视觉上的移动可以是列表控件中的子元素在视觉上滚动。
在本公开的一些实施例中，第一控件的区域范围内还包括第二子控件。第二子控件可以与上文的第一子控件是同一个子控件，也可以是不同的子控件。例如，在图1B所示的情景中，第一子控件例如是子控件111，则第二子控件可以是子控件112、子控件113或者子控件114，当然第二子控件也可以是子控件111。
图3示出了本公开至少一个实施例提供的另一操作方法的流程图。
如图3所示，该操作方法在图1A所示的操作方法包括步骤S10～40的基础上，还可以包括步骤S50和步骤S60。步骤S50和步骤S60可以在步骤S10之前执行，也可以在步骤S40之后执行。
步骤S50：获取对第二子控件进行的第二移动操作，第二移动操作用于将第二子控件由第一位置调整到第二位置。
步骤S60：由第二位置对应的子控件显示第二子控件显示的图像数据，使得在视觉上第二子控件被调整到第二位置。
该方法能够调整控件中子控件的位置，提升人机交互的多样性，便于对子控件和控件的操作和控制。
对于步骤S50，第二移动操作包括对第二子控件进行的按压操作以及对第二位置的选择操作，按压操作的时长大于预设时长。
按压操作的时长大于预设时长能够防止由于手抖动等操作导致的误判。以下将时长大于预设时长的按压操作称为长按操作。
预设时长例如可以是2s、3s等，本领域技术人员可以自己设定预设时长。
在本公开的一些实施例中，例如第二位置的选择操作可以是在第二位置进行的点击操作。例如，第二移动操作可以是对子控件114的长按操作以及对位置P0的点击操作。
在本公开的另一些实施例中，例如第二移动操作可以是对子控件进行长按操作，并且在长按操作之后拖动子控件直至子控件被拖动到第二位置时，停止拖动子控件并且释放子控件。在该实施例中，对第二位置的选择操作为在子控件被拖动到第二位置时，拖动停止并且子控件被释放。释放子控件例如是指手指或者其他操作触摸屏的操作体离开触摸屏。例如，如图2A所示，对子控件114执行长按操作，并且在长按操作后，手指在触摸屏上沿着实线示出的轨迹滑动，当手指滑动到位置P0时停止了滑动并且释放子控件114。位置P0为第二位置的示例。
对于步骤S60，第二位置对应的子控件例如可以是最靠近第二位置的子控件。
例如，第二位置P0对应的子控件为子控件112，由子控件112显示子控件114显示的图像数据。
在本公开的一些实施例中，由第二位置对应的子控件显示第二子控件显示的图像数据，包括：第二位置对应的子控件与第二子控件在视觉上交换位置。如图2A所示，执行步骤S60使得子控件114和控件112在视觉上交换位置。
在本公开的一些实施例中，在视觉上交换位置可以是指两个子控件的位置实质上并没有发生改变，只是两个子控件显示的图像数据进行了交换，这样在视觉上体现出两个子控件的位置进行了交换。例如，子控件114的图像数据由第一图像数据变化为第二图像数据，子控件112的图像数据由第二图像数据变化为第一图像数据，这样可以看起来将子控件114的位置和子控件112的位置进行了交换。
在本公开的另一些实施例中，在视觉上交换位置可以是在子控件112的当前位置按照子控件114的属性绘制子控件114，在子控件114的当前位置按照子控件112的属性绘制子控件112，从而实现两个子控件的位置交换。里，可以利用上述SKIA引擎在相应的位置绘制子控件。
在该实施例中，若执行步骤S60，则控件110中显示的子控件的排列顺序为：子控件111、子控件114、子控件113和子控件112。
在本公开的一些实施例中，由第二位置对应的子控件显示第二子控件显示的图像数据，包括：第二子控件在视觉上插入两个相邻的子控件之间，两个相邻的子控件包括第二位置对应的子控件。
如图2A所示，子控件114在视觉上插入子控件112和子控件111之间。在该实施例中，若执行步骤S60，则控件110中显示的子控件的排列顺序为：子控件111、子控件114、子控件112和子控件113。
在本公开的一些实施例中，每个子控件的位置可以是并没有发生变化，而是子控件112显示子控件114的图像数据，子控件113显示子控件112的图像数据，子控件114显示子控件113的图像数据，依次类推，从而实现视觉上的移动。
在本公开的另一些实施例中，可以在子控件112的当前位置按照子控件114的属性绘制子控件114，在子控件113的当前位置按照子控件112的属性绘制子控件112，在子控件114的当前位置按照子控件113的属性绘制子控件113，从而实现视觉上的移动。
在本公开的一些实施例中，显示页面包括第一显示区域、第二显示区域和第三显示区域，第一控件位于第一显示区域中。如图2A所示，显示页面200包括显示区域210、显示区域220和显示区域230。显示区域210、显示区域220和显示区域230分别为第一显示区域、第二显示区域和第三显示区域的示例。
显示区域220包括多个第二控件，每个第二控件用于显示来自多个子控件之一的图像数据。例如，如图2A所示，显示区域220中的控件130为第二控件的示例，响应于对子控件112执行的第一移动操作，控件130用于显示来自子控件112的图像数据。
在本公开的一些实施例中，显示区域230配置为显示至少一个排布策略，每个排布策略指示一种用于对多个第二控件进行排布的排布方式，或者指示多个第二控件分别对应的子控件，以由每个第二控件显示来自与第二控件对应的子控件的图像数据。
在本公开的一些实施例中，显示区域230还配置为显示至少一个显示策略，显示策略指示排布策略与时间段的对应关系，以在每个时间段内显示与每个时间段对应的排布策略。
如图2A所示，例如显示区域230至少包括场景和预案两个选择项，场景选择项用于显示排布策略，预案选择项用于显示显示策略。当场景选择项被选中时，显示区域230显示多个排布策略，例如排布策略1、排布策略2和排布策略3等。
在本公开的一些实施例中，每个排布策略指示一种用于对多个第二控件进行排布的排布方式。在该实施例中排布方式可以包括显示区域220的区域范围内容纳显示的第二控件的数量，以及多个第二控件的分布。例如，排布策略1为图2A中显示区域220所示的排布方式，即显示区域220中显示3个第二控件，并且左侧显示一个较大的第二控件140，右侧显示两个较小的第二控件130和第二控件150。又例如，排布策略2可以是靠近显示区域210的区域显示两个较小的第二控件，远离显示区域210的区域显示一个较大的第二控件。该实施例能够灵活地调整多个第二控件的排布，用户可以根据实际需要设计排布策略，从而便于观察第二控件显示的图像数据。例如，显示关键图像数据的第二控件排布于便于观察的位置，并且显示关键图像数据的第二控件的显示面积较大。
在本公开的另一些实施例中，每个排布策略指示多个第二控件分别对应的子控件，以由每个第二控件显示来自与第二控件对应的子控件的图像数据。在该实施例中，例如，多个排布策略中多个第二控件的分布可以是相同的，多个排布策略中多个第二控件分布对应的子控件是不同的。例如，多个第二空间在显示区域220中的分布如图2A所示，排布策略1可以是显示区域220中左侧较大的控件140与子控件111对应，控件130与子控件112等对应，控件150与子控件113等对应。排布策略2可以是控件140与子控件112等对应，控件130与子控件113等对应，控件150与子控件111等对应。
例如，该操作方法应用于智慧城市的大屏端，智慧城市包括多个街道，子控件111显示街道1的图像数据，子控件112显示街道2的图像数据，子控件113显示街道3的图像数据，子控件114显示街道4的图像数据等等。排布策略1例如包括控件140与子控件111等对应，控件130与子控件112等对应，控件150与子控件113等对应，则控件140显示街道1的图像数据，控件130显示街道2的图像数据，以及控件150显示街道3的图像数据。排布策略2例如包括控件140与子控件112对应，控件130与子控件113对应，控件150与子控件114对应，则控件140显示街道2的图像数据，控件150显示街道4的图像数据，控件130显示街道3的图像数据。
当显示区域230中的预案选择项被选中时，显示区域230显示多个显示策略。显示策略指示排布策略与时间段的对应关系，以在每个时间段内显示与每个时间段对应的排布策略。
例如，显示策略包括显示策略1、显示策略2、显示策略3等，显示策略1为在[a1，a2)时间段按照排布策略1进行显示，在[a2，a3)按照排布策略2进行显示，在[a3，a4)按照排布策略3进行显示等等。
例如，在上述智慧城市的应用场景中，在[a1，a2)时间段按照排布策略1进行显示，即由较大的控件140显示街道1的图像数据，以便于对街道1的图像数据进行观看；在[a2，a3)时间段按照排布策略2进行显示，由较大的控件140显示街道2的图像，以便于对街道2的图像数据进行观看。该方法能够针对不同的时间段按照不同的排布策略显示多个场景(例如，街道)，使得触摸屏显示的侧重点不同，便于用户对图像数据进行观看，提高了显示图像数据的灵活性，提高了用户体验。例如，街道1上包括公园，街道2上包括学校，则在[6:00，7:00)由较大的控件140显示街道1的图像数据，在[7:00，9:00)由较大的控件140显示街道2的图像数据，这样方便用户根据每个时间段的特殊性来设定重点观察的街道场景，提高了用户体验。
在本公开的一些实施例中，例如显示页面200显示于触摸屏上，该触摸屏可以外接拼接屏，该拼接屏包括多个外接显示屏。例如，触摸屏可以获取多个外接显示屏中的图像数据并将其显示于多个第二控件中。
在本公开的一些实施例中，例如，根据用户的设置来确定多个第二控件和多个外接显示屏的对应关系，每个第二控件显示与每个第二控件对应的外接显示屏的图像数据。例如，显示页面200中控件110中的每个子控件分别与一个外接显示屏对应以显示该外接显示屏的图像数据，用户可以将子控件拖拽到位于第二显示区域的第二控件中，由该第二控件显示子控件中的图像数据，也即该第二控件与该子控件对应的外接显示屏对应。又例如，用户可以通过直接输入的方式配置多个第二控件分别对应的外接显示屏。
在本公开的一些实施例中，多个第二控件的排布可以与拼接屏的排布相同，以对拼接屏的显示画面在触摸屏上还原。
在本公开的上述实施例中，用户可以设置不同的排布策略，使得第二显示区域中的多个控件合理地显示多个图像数据，避免图像画面溢出控件中的显示区域，或者图像画面较小导致控件的显示区域未充分利用，从而满足用户各种显示需求。例如，拼接屏包括外接显示屏1、外接显示屏2和外接显示屏3，第二显示区域包括控件130、控件140和控件150，控件130与外接显示屏1对应，控件140与外接显示屏2对应，控件150与外接显示屏3对应。若外接显示屏3比外接显示屏1和外接显示屏2大，则可以调整图2A中显示区域220中的排布策略，例如将控件150放大，控件130和控件140缩小，以使得外接显示屏3的图像数据能够完整且较清楚地显示于控件150中，避免图像画面溢出控件的显示区域。又例如，将外接显示屏3与控件150对应调整为与控件140对应，外接显示屏2与控件140对应调整为与控件150对应，从而使得控件140显示外接显示屏3的图像数据，控件150显示外接显示屏2的图像数据。
在本公开的一些实施例中，第一控件、第一子控件和第二控件为基于跨平台界面开发框架获得或者基于操作系统获得。
例如，本公开中的所有的控件和子控件都是基于跨平台界面开发框架(例如，Flutter)获得的，或者本公开中的所有的控件和子控件都是基于操作系统(例如，Android、Windows)获得的。
例如，Flutter提供Draggable组件，Draggable组件中有一个处理手势相关的类GestureRecognizer。例如，本公开一些实施例中拖拽控件是通过Flutter提供的Draggable组件得到的。
例如，本公开一些实施例中的列表控件是通过Flutter提供的Scoller组件得到的。
例如，Flutter通过类GestureRecognizer监听手势的事件，并且手势的接管和丢弃都可以由类GestureRecognizer的内部逻辑处理，所有手势都可以在Flutter提供的类GestureBinding中进行分派处理。通过Flutter提供的hitTest方法判定需要处理手势的组件，并将组件添加到HitTestResult的路径(path)中。所有需要处理手势的组件都会被放到竞技场(Arena)中，每个组件都会有自己获取控制权的响应条件(例如，第一响应条件和第二响应条件)，当手势满足其中一个组件的响应条件时，组件可以主动获取控制权，其它组件将丧失处理手势的权利。如果多个组件获取控制权的响应条件一样并且是首先满足条件，控制权交给第一个被添加到竞技场的组件。如果竞技场中只有一个组件，则操作控制系统直接把手势控制权交给组件。如果手势发生变化，但是条件不满足任何组件的响应条件，操作控制系统会把控制权交给没有配置响应条件的组件。在本公开中的第一移动操作和第二移动操作例如可以是一种手势，从而利用Flutter来操作触摸屏上显示的控件和子控件。
例如，在本公开的一些实施例中，列表控件没有配置响应条件，当判断滑动距离大于距离阈值时，并且也没有满足其他组件的响应条件时操作控制系统主动将手势控制权给列表控件。
在本公开的一些实施例中，若手指移动的距离大于距离阈值，则在滑动操作的滑动方向和列表控件的延伸之间的夹角在预设范围内时，拖拽控件不申请获取控制权，此时，操作控制系统将控制权交由列表控件，在滑动操作的滑动方向和列表控件的延伸之间的夹角在预设范围之外时，拖拽控件才去申请获取控制权。
又例如，本公开的实施例也可以通过Android操作系统实现。在Android操作系统中组件是一个独立的View或者有若干View组成的ViewGroup，当手指触摸到屏幕时，Android操作系统会将触摸事件(touch)由顶层组件(DecorView)依次往下传递，如果是ViewGroup则继续往子View传递，如果某个View想要处理触摸事件时，需要对事件进行拦截消费掉，这个是在dispatchTouchEvent方法中返回true即可，如果到达最深层的View也没有消费的话，触发事件会进行回传，交由上一级的View处理。例如，列表控件为拖拽控件的上一级View，当用户在触摸屏上进行滑动操作时，滑动操作的滑动方向会传递给拖拽控件，若滑动方向与列表控件的延伸方向的夹角在预设范围内，则拖拽控件不消费该滑动操作，而回传给上一级的列表控件，由列表控件响应该滑动操作。若滑动方向与列表控件的延伸方向的夹角在预设范围之外，则拖拽控件消费该滑动操作以响应该滑动操作。
对于一个手势(例如，滑动操作)，Flutter的处理机制是只要一个组件(例如，列表控件的Scoller组件、Draggable组件等)获取到控制权，则由该组件响应本次手势，直到本次手势结束。例如，在图2A所示的情景中，一旦控制权被子控件112获得，那么在手指从子控件112对应的位置滑动到第二控件130所在的位置的过程中，一直交由子控件112无需再次判断控制权交由哪个组件。Android对于触摸事件拦截消费是只针对每一次移动。例如，在图2A所示的情景中，在手指从子控件112对应的位置滑动到第二控件130所在的位置的过程中，手指的每次移动，都需要再对触摸事件进行拦截和消费。因此，利用Flutter获得控件和子控件能够提高响应速度并且节约资源。
在本公开的一些实施例中，如图2A所示，显示区域220包括多个第二控件，每个第二控件例如可以显示三维图像数据。例如，显示页面200可以包括数据展示面板层和三维模型展示层。数据展示面板层用于提供用户界面(User Interface,UI)。例如，数据展示面板层可以提供二维的用户界面，或者可以提供三维的用户界面。数据展示面板层可以利用Flutter开发框架得到的。例如，显示页面200中的控件和子控件是数据展示面板层提供的。
在本公开的一些实施例中，通过三维模型展示层显示三维图像数据。例如三维模型展示层是基于OpenSceneGraph(OSG)开发的。OSG是一个开放源码、跨平台的图形开发包，它为诸如飞行器仿真、游戏、虚拟现实、科学计算可视化这样的高性能图形应用程序开发而设计。OSG提供一个在开放图形库(Open Graphics Library，OpenGL)之上的面向对象的框架，从而能把开发者从实现和优化底层图形的调用中解脱出来，并且它为图形应用程序的快速开发提供很多附加的实用工具。
图4示出了本公开至少一个实施例提供的一种操作装置400的示意框图。
例如，如图4所示，该操作装置400包括获取单元410、第一响应单元420和第二响应单元430。
获取单元410配置为获取对第一控件中的第一子控件进行的第一移动操作，第一子控件位于所述第一控件的区域范围中。
获取单元410例如可以执行图1A描述的步骤S10。
第一响应单元420配置为响应于所述第一移动操作满足所述第一控件的第一响应条件且满足所述第一子控件的第二响应条件，由所述第一控件响应所述第一移动操作。
第一响应单元420例如可以执行图1A描述的步骤S20。
第二响应单元430，配置为响应于所述第一移动操作不满足所述第一响应条件但满足所述第二响应条件，由所述第一子控件响应所述第一移动操作而产生视觉上的移动。
第二响应单元430例如可以执行图1A描述的步骤S30。
该操作装置能够缓解对第一控件进行控制和对第一子控件进行控制存在操作冲突的问题。
例如，获取单元410、第一响应单元420和第二响应单元430可以为硬件、软件、固件以及它们的任意可行的组合。例如，获取单元410、第一响应单元420和第二响应单元430可以为专用或通用的电路、芯片或装置等，也可以为处理器和存储器的结合。关于上述各个单元的具体实现形式，本公开的实施例对此不作限制。
需要说明的是，本公开的实施例中，操作装置400的各个单元与前述的操作方法的各个步骤对应，关于操作装置400的具体功能可以参考关于操作方法的相关描述，此处不再赘述。图4所示的操作装置400的组件和结构只是示例性的，而非限制性的，根据需要，该操作装置400还可以包括其他组件和结构。
图5为本公开一些实施例提供的一种电子设备的示意框图。如图5所示，该电子设备500包括处理器510和存储器520。存储器520用于存储非暂时性计算机可读指令(例如一个或多个计算机程序模块)。处理器510用于运行非暂时性计算机可读指令，非暂时性计算机可读指令被处理器510运行时可以执行上文所述的操作方法中的一个或多个步骤。存储器520和处理器510可以通过总线系统和/或其它形式的连接机构(未示出)互连。
例如，处理器510可以是中央处理单元(CPU)、图形处理单元(GPU)或者具有数据处理能力和/或程序执行能力的其它形式的处理单元。例如，中央处理单元(CPU)可以为X86或ARM架构等。处理器510可以为通用处理器或专用处理器，可以控制电子设备500中的其它组件以执行期望的功能。
例如，存储器520可以包括一个或多个计算机程序产品的任意组合，计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。非易失性存储器例如可以包括只读存储器(ROM)、硬盘、可擦除可编程只读存储器(EPROM)、便携式紧致盘只读存储器(CD-ROM)、USB存储器、闪存等。在计算机可读存储介质上可以存储一个或多个计算机程序模块，处理器510可以运行一个或多个计算机程序模块，以实现电子设备500的各种功能。在计算机可读存储介质中还可以存储各种应用程序和各种数据以及应用程序使用和/或产生的各种数据等。
需要说明的是，本公开的实施例中，电子设备500的具体功能和技术效果可以参考上文中关于操作方法的描述，此处不再赘述。
图6为本公开一些实施例提供的另一种电子设备的示意框图。该电子设备600例如适于用来实施本公开实施例提供的操作方法。电子设备600可以是终端设备等。需要注意的是，图6示出的电子设备600仅仅是一个示例，其不会对本公开实施例的功能和使用范围带来任何限制。
如图6所示，电子设备600可以包括处理装置(例如中央处理器、图形处理器等)610，其可以根据存储在只读存储器(ROM)620中的程序或者从存储装置680加载到随机访问存储器(RAM)630中的程序而执行各种适当的动作和处理。在RAM 630中，还存储有电子设备600操作所需的各种程序和数据。处理装置610、ROM 620以及RAM630通过总线640彼此相连。输入/输出(I/O)接口650也连接至总线640。
通常，以下装置可以连接至I/O接口650：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置660；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置670；包括例如磁带、硬盘等的存储装置680；以及通信装置690。通信装置690可以允许电子设备600与其他电子设备进行无线或有线通信以交换数据。虽然图6示出了具有各种装置的电子设备600，但应理解的是，并不要求实施或具备所有示出的装置，电子设备600可以替代地实施或具备更多或更少的装置。
例如，根据本公开的实施例，上述操作方法可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包括用于执行上述操作方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置690从网络上被下载和安装，或者从存储装置680安装，或者从ROM620安装。在该计算机程序被处理装置610执行时，可以实现本公开实施例提供的操作方法中限定的功能。
本公开的至少一个实施例还提供了一种计算机可读存储介质，该计算机可读存储介质用于存储非暂时性计算机可读指令，当非暂时性计算机可读指令由计算机执行时可以实现上述的操作方法。利用该计算机可读存储介质，能够缓解对第一控件进行控制和对第一子控件进行控制存在操作冲突的问题。
图7为本公开一些实施例提供的一种存储介质的示意图。如图7所示，存储介质700用于非暂时性存储有计算机可读指令710。例如，当计算机可读指令710由计算机执行时可以执行根据上文所述的操作方法中的一个或多个步骤。
例如，该存储介质700可以应用于上述电子设备500中。例如，存储介质700可以为图5所示的电子设备500中的存储器520。例如，关于存储介质700的相关说明可以参考图5所示的电子设备500中的存储器520的相应描述，此处不再赘述。
有以下几点需要说明：
(1)本公开实施例附图只涉及到本公开实施例涉及到的结构，其他结构可参考通常设计。
(2)在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合以得到新的实施例。
以上所述，仅为本公开的具体实施方式，但本公开的保护范围并不局限于此，本公开的保护范围应以所述权利要求的保护范围为准。

Claims (22)

1.一种操作方法，包括：
获取对第一控件中的第一子控件进行的第一移动操作，其中，所述第一子控件位于所述第一控件的区域范围中；
响应于所述第一移动操作满足所述第一控件的第一响应条件且满足所述第一子控件的第二响应条件，由所述第一控件响应所述第一移动操作；以及
响应于所述第一移动操作不满足所述第一响应条件但满足所述第二响应条件，由所述第一子控件响应所述第一移动操作而产生视觉上的移动。
2.根据权利要求1所述的方法，其中，所述第一控件包括列表控件，所述第一子控件包括拖拽控件，所述拖拽控件为可拖动的控件。
3.根据权利要求1所述的方法，其中，所述第一控件的所述区域范围内包括N个子控件，N为大于1的整数，所述N个子控件依次排列在所述第一控件中，所述第一子控件为所述N个子控件之一。
4.根据权利要求3所述的方法，其中，所述第一控件包括列表控件，
响应于所述第一移动操作满足所述第一控件的第一响应条件且满足所述第一子控件的第二响应条件，由所述第一控件响应所述第一移动操作，包括：
响应于所述第一移动操作满足所述第一响应条件且满足所述第二响应条件，所述列表控件使得所述N个子控件在视觉上在所述列表控件中滚动。
5.根据权利要求1所述的方法，其中，所述第一移动操作包括滑动操作。
6.根据权利要求5所述的方法，其中，所述第一响应条件为所述第二响应条件的子集。
7.根据权利要求6所述的方法，其中，
所述第二响应条件包括：所述滑动操作的滑动距离大于距离阈值，
所述第一响应条件包括：所述滑动操作的滑动距离大于所述距离阈值，并且所述滑动操作的滑动方向在预设范围内。
8.根据权利要求5所述的方法，其中，
所述第一响应条件包括：所述滑动操作的滑动距离大于距离阈值，并且所述滑动操作的滑动方向在预设范围内，
所述第二响应条件包括：所述滑动操作的滑动距离大于距离阈值，并且所述滑动操作的滑动方向在预设范围外。
9.根据权利要求7或8所述的方法，其中，所述滑动操作的所述滑动方向在所述预设范围内，包括：
所述滑动操作的所述滑动方向与所述第一控件的延伸方向之间的夹角在所述预设范围内。
10.根据权利要求9所述的方法，其中，
所述延伸方向为水平方向，响应于所述滑动操作在水平方向上滑动的第一距离大于所述滑动操作在竖直方向上滑动的第二距离，所述滑动方向与所述第一控件的延伸方向之间的夹角在所述预设范围内；或者
所述延伸方向为竖直方向，响应于所述滑动操作在水平方向上滑动的第一距离小于所述滑动操作在竖直方向上滑动的第二距离，所述滑动方向与所述第一控件的延伸方向之间的夹角在所述预设范围内，
其中，所述水平方向与所述竖直方向垂直。
11.根据权利要求2所述的方法，其中，响应于所述第一移动操作不满足所述第一响应条件但满足所述第二响应条件，由所述第一子控件响应所述第一移动操作而产生视觉上的移动，包括：
响应于所述第一移动操作不满足所述第一响应条件但满足所述第二响应条件，生成所述拖拽控件的辅助控件；以及
所述辅助控件跟随所述第一移动操作移动。
12.根据权利要求11所述的方法，其中，所述辅助控件根据所述第一移动操作移动到所述第一控件的区域范围之外。
13.根据权利要求12所述的方法，其中，所述第一控件和所述第一子控件显示于显示页面，所述显示页面还包括位于所述第一控件的区域范围之外的第二控件，所述第一子控件包括显示窗口并且显示图像数据，
所述方法还包括：
响应于所述辅助控件移动到第二控件的区域范围移动操作停止，所述第一子控件向所述第二控件提供所述图像数据，并且由所述第二控件的显示窗口显示所述图像数据。
14.根据权利要求13所述的方法，其中，所述第一控件的区域范围内还包括第二子控件，
所述方法还包括：
获取对第二子控件进行的第二移动操作，其中，所述第二移动操作用于将所述第二子控件由第一位置调整到第二位置；以及
由所述第二位置对应的子控件显示所述第二子控件显示的图像数据。
15.根据权利要求14所述的方法，其中，所述第二移动操作包括对所述第二子控件进行的按压操作以及对所述第二位置的选择操作，其中，所述按压操作的时长大于预设时长。
16.根据权利要求13所述的方法，所述显示页面包括第一显示区域、第二显示区域和第三显示区域，所述第一控件位于所述第一显示区域中，
所述第二显示区域包括多个所述第二控件，每个所述第二控件用于显示来自所述多个子控件之一的图像数据，
所述第三显示区域配置为显示至少一个排布策略，每个排布策略指示一种用于对多个所述第二控件进行排布的排布方式，或者指示多个所述第二控件分别对应的子控件，以由每个所述第二控件显示来自与所述第二控件对应的子控件的图像数据。
17.根据权利要求16所述的方法，其中，所述第三显示区域还配置为显示至少一个显示策略，所述显示策略指示所述排布策略与时间段的对应关系，以在每个时间段内显示与所述每个时间段对应的排布策略。
18.根据权利要求14所述的方法，其中，所述第一控件、所述第一子控件和所述第二控件为基于跨平台界面开发框架获得或者基于操作系统获得。
19.根据权利要求1所述的方法，其中，所述第一控件为拖拽控件，所述第一子控件为列表控件，
其中，由所述第一控件响应所述第一移动操作，包括：
所述拖拽控件跟随所述第一移动操作而移动，
由所述第一子控件响应所述第一移动操作而产生视觉上的移动，包括：
所述列表控件中的子元素在视觉上在所述列表控件中滚动。
20.一种操作装置，包括：
获取单元，配置为获取对第一控件中的第一子控件进行的第一移动操作，其中，所述第一子控件位于所述第一控件的区域范围中；
第一响应单元，配置为响应于所述第一移动操作满足所述第一控件的第一响应条件且满足所述第一子控件的第二响应条件，由所述第一控件响应所述第一移动操作；
第二响应单元，配置为响应于所述第一移动操作不满足所述第一响应条件但满足所述第二响应条件，由所述第一子控件响应所述第一移动操作而产生视觉上的移动。
21.一种电子设备，包括：
处理器；
存储器，包括一个或多个计算机程序指令；
其中，所述一个或多个计算机程序指令被存储在所述存储器中，并由所述处理器执行时实现权利要求1-19任一项所述的操作方法。
22.一种计算机可读存储介质，非暂时性存储有计算机可读指令，其中，当所述计算机可读指令由处理器执行时实现权利要求1-19任一项所述的操作方法。
CN202210031940.1A 2022-01-12 2022-01-12 操作方法、装置、电子设备和计算机可读存储介质 Active CN114385061B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
CN202210031940.1A CN114385061B (zh) 2022-01-12 2022-01-12 操作方法、装置、电子设备和计算机可读存储介质
PCT/CN2023/071499 WO2023134655A1 (zh) 2022-01-12 2023-01-10 操作方法、装置、电子设备和计算机可读存储介质
US18/701,051 US20240345717A1 (en) 2022-01-12 2023-01-10 Operation method and apparatus, and electronic device and computer-readable storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210031940.1A CN114385061B (zh) 2022-01-12 2022-01-12 操作方法、装置、电子设备和计算机可读存储介质

Publications (2)

Publication Number Publication Date
CN114385061A true CN114385061A (zh) 2022-04-22
CN114385061B CN114385061B (zh) 2024-09-24

Family

ID=81202173

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210031940.1A Active CN114385061B (zh) 2022-01-12 2022-01-12 操作方法、装置、电子设备和计算机可读存储介质

Country Status (3)

Country Link
US (1) US20240345717A1 (zh)
CN (1) CN114385061B (zh)
WO (1) WO2023134655A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023134655A1 (zh) * 2022-01-12 2023-07-20 京东方科技集团股份有限公司 操作方法、装置、电子设备和计算机可读存储介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105912314A (zh) * 2015-12-28 2016-08-31 乐视致新电子科技（天津）有限公司 用户界面控件的布局方法及系统、控制方法及系统
WO2018046000A1 (zh) * 2016-09-08 2018-03-15 中兴通讯股份有限公司 触控操作方法和装置
CN109725959A (zh) * 2018-05-08 2019-05-07 平安普惠企业管理有限公司 页面控件的响应方法、显示设备及计算机可读存储介质
WO2021057337A1 (zh) * 2019-09-27 2021-04-01 维沃移动通信有限公司 操作方法及电子设备
CN113220210A (zh) * 2021-05-27 2021-08-06 网易（杭州）网络有限公司 操作的识别方法、装置、电子设备及计算机可读介质
CN113608655A (zh) * 2021-07-29 2021-11-05 维沃移动通信有限公司 信息处理方法、装置、电子设备和存储介质
WO2021227770A1 (zh) * 2020-05-14 2021-11-18 华为技术有限公司 应用窗口显示方法和电子设备

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106951152B (zh) * 2016-01-07 2020-12-08 阿里巴巴集团控股有限公司 标签栏的控制方法和装置
CN113051016B (zh) * 2021-03-30 2022-06-21 北京字节跳动网络技术有限公司 页面显示方法、装置、设备和存储介质
CN114385061B (zh) * 2022-01-12 2024-09-24 京东方科技集团股份有限公司 操作方法、装置、电子设备和计算机可读存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105912314A (zh) * 2015-12-28 2016-08-31 乐视致新电子科技（天津）有限公司 用户界面控件的布局方法及系统、控制方法及系统
WO2018046000A1 (zh) * 2016-09-08 2018-03-15 中兴通讯股份有限公司 触控操作方法和装置
CN109725959A (zh) * 2018-05-08 2019-05-07 平安普惠企业管理有限公司 页面控件的响应方法、显示设备及计算机可读存储介质
WO2021057337A1 (zh) * 2019-09-27 2021-04-01 维沃移动通信有限公司 操作方法及电子设备
WO2021227770A1 (zh) * 2020-05-14 2021-11-18 华为技术有限公司 应用窗口显示方法和电子设备
CN113220210A (zh) * 2021-05-27 2021-08-06 网易（杭州）网络有限公司 操作的识别方法、装置、电子设备及计算机可读介质
CN113608655A (zh) * 2021-07-29 2021-11-05 维沃移动通信有限公司 信息处理方法、装置、电子设备和存储介质

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023134655A1 (zh) * 2022-01-12 2023-07-20 京东方科技集团股份有限公司 操作方法、装置、电子设备和计算机可读存储介质

Also Published As

Publication number Publication date
US20240345717A1 (en) 2024-10-17
WO2023134655A1 (zh) 2023-07-20
CN114385061B (zh) 2024-09-24

Similar Documents

Publication Publication Date Title
US11740755B2 (en) Systems, methods, and graphical user interfaces for interacting with augmented and virtual reality environments
US10754531B2 (en) Displaying a three dimensional user interface
EP4070865A1 (en) Method and apparatus for displaying virtual scene, and device and storage medium
US9436369B2 (en) Touch interface for precise rotation of an object
WO2021036581A1 (zh) 虚拟对象的控制方法和相关装置
CN103198516B (zh) 动态图形界面阴影
US9250780B2 (en) Information processing method and electronic device
WO2016145832A1 (zh) 终端的操作方法及装置
KR20060052717A (ko) 가상 데스크 탑, 프로그램 예의 배열을 리콜링하는 방법, 애플리케이션 예를 관리하는 방법 및 애플리케이션을 관리하는 방법
KR101735442B1 (ko) 표시장치에서 객체의 오리엔테이션을 조작하기 위한 장치 및 방법
CN102929556A (zh) 一种基于触摸屏的交互控制方法及设备
KR20160122753A (ko) 어플리케이션 요소의 대체 그래픽 표시의 사전 발생을 통한 입력에 대한 저레이턴시 시각적 응답 및 그래픽 처리 장치 상의 입력 처리
JP6630669B2 (ja) ウィジェットエリアの調整方法および調整装置
CN110928614B (zh) 界面显示方法、装置、设备及存储介质
US20140145969A1 (en) System and method for graphic object management in a large-display area computing device
CN111744181B (zh) 游戏中信息的显示方法、装置、游戏客户端及介质
US20180207531A1 (en) Program, electronic device, system, and method for determining resource allocation for executing rendering while predicting player's intent
WO2023134655A1 (zh) 操作方法、装置、电子设备和计算机可读存储介质
JP5767371B1 (ja) 仮想空間平面上に配置したオブジェクトを表示制御するゲーム・プログラム
CN114741016B (zh) 操作方法、装置、电子设备和计算机可读存储介质
CN111782123B (zh) 一种屏幕显示方法及显示设备
CN105376510A (zh) 一种投影方法及投影装置
JP2016016319A (ja) 仮想空間平面上に配置したオブジェクトを表示制御するゲーム・プログラム
CN111273802A (zh) 一种在屏幕上移动对象的方法及触摸显示装置
Nilsson Hardware Supported Frame Correction in Touch Screen Systems-For a Guaranteed Low Processing Latency

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
GR01 Patent grant
GR01 Patent grant