CN117971220A - 控件显示方法、介质、装置和计算设备 - Google Patents

Abstract

本公开的实施方式提供了一种控件显示方法、介质、装置和计算设备，涉及互联网技术领域。该控件显示方法包括：响应于当前页面中的划动事件，确定划动事件对应的第一事件参数信息，基于第一事件参数信息，确定划动事件对应的目标划动控件，再基于第一事件参数信息和目标划动控件的当前显示状态，确定目标划动控件的目标显示状态和状态切换动画效果；以基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态。本公开的方法解决了相关技术中缺乏可用的支持划动显示功能的控件的问题，对划动以展示隐藏的操作选项控件这一功能提供良好支持，为用户带来了更好的体验。

Description

控件显示方法、介质、装置和计算设备

技术领域

本公开的实施方式涉及互联网技术领域，更具体地，本公开的实施方式涉及一种控件显示方法、介质、装置和计算设备。

背景技术

本部分旨在为权利要求书中陈述的本公开的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

相关技术中，为方便应用程序的内容展示和交互，经常会需要为UI控件添加可左右划动，并展示隐藏的操作选项的需求。例如在电商应用的购物车列表页面中，通过左右划动单个商品所对应的控件，展示隐藏的收藏和删除功能的选项按钮。

现有Android端的划动显示功能，通常是基于Android端原生的View控件库开发，或通过相关的第三方库基于View体系开发的，但View体系本身只能支持控件简单划动，对基于控件划动相关的进一步的动作缺乏支持，导致用户体验不足，且新版本的Android端将逐步停止对View体系的支持，而作为替代的Jetpack Compose框架并没有提供实现划动的控件，使得Android端缺乏可用的支持划动显示功能的控件。

发明内容

本公开提供一种控件显示方法、介质、装置和计算设备，以解决相关技术中缺乏可用的支持划动显示功能的控件的问题。

在本公开实施方式的第一方面中，提供了一种控件显示方法，包括：

响应于当前页面中的划动事件，确定划动事件对应的第一事件参数信息；

基于第一事件参数信息，确定划动事件对应的目标划动控件，目标划动控件包括主控件和至少一个操作选项控件；

基于第一事件参数信息和目标划动控件的当前显示状态，确定目标划动控件的目标显示状态和状态切换动画效果；

基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态。

在本公开实施方式的第二方面中，提供了一种计算机可读存储介质，包括：

计算机可读存储介质中存储有计算机执行指令，计算机执行指令被处理器执行时用于实现如本公开实施方式的第一方面的控件显示方法。

在本公开实施方式的第三方面中，提供了一种控件显示装置，包括：

拦截模块，用于响应于当前页面中的划动事件，确定划动事件对应的第一事件参数信息；

定位模块，用于基于第一事件参数信息，确定划动事件对应的目标划动控件，目标划动控件包括主控件和至少一个操作选项控件；

处理模块，用于基于第一事件参数信息和目标划动控件的当前显示状态，确定目标划动控件的目标显示状态和状态切换动画效果；

更新模块，用于基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态。

在本公开实施方式的第四方面中，提供了一种计算设备，包括：

至少一个处理器；

以及与至少一个处理器通信连接的存储器；

其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使计算设备执行如本公开第一方面中的控件显示方法。

根据本公开实施方式的控件显示方法、介质、装置和计算设备，通过响应于当前页面中的划动事件，确定划动事件对应的第一事件参数信息，然后基于第一事件参数信息，确定划动事件对应的目标划动控件，再基于第一事件参数信息和目标划动控件的当前显示状态，确定目标划动控件的目标显示状态和状态切换动画效果；以基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态。由此，可以通过自动化拦截页面内的划动事件，实现对页面内同时存在多个可以划动的控件时，精准确定需要执行动作的划动控件，并对划动以展示隐藏的操作选项控件这一功能提供良好支持，同时通过添加状态切换动画效果，提供较好的动画效果支持，进而提升用户的使用体验。

附图说明

通过参考附图阅读下文的详细描述，本公开示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本公开的若干实施方式，其中：

图1示意性地示出了根据本公开实施方式的应用场景图；

图2a示意性地示出了根据本公开另一实施例的控件显示方法的流程图；

图2b示意性地示出了图2a所示实施例提供的目标划动控件基于状态切换动画效果切换显示状态的过程示意图；

图3a示意性地示出了根据本公开另一实施例的控件显示方法的流程图；

图3b示意性地示出了图3a所示实施例提供的当前页面中区域结构示意图；

图3c示意性地示出了图3a所示实施例提供的确定划动控件划动方向与划动进度的方法流程图；

图3d示意性地示出了图3a所示实施例提供的存在多个操作选项控件的划动控件的显示状态示意图；

图4示意性地示出了根据本公开另一实施例的控件显示方法的流程图；

图5a示意性地示出了根据本公开另一实施例的控件显示方法的流程图；

图5b示意性地示出了图5a所示实施例提供的基于主列表滚动事件的划动控件互斥逻辑示意图；

图6a示意性地示出了根据本公开另一实施例的控件显示装置的结构示意图；

图6b示意性地示出了图6a所示实施例提供的包含划动控件的当前页面在不同平台的显示状态示意图；

图7示意性地示出了根据本公开再一实施例的存储介质的结构示意图；

图8示意性地示出了根据本公开再一实施例的控件显示装置的结构示意图；

图9示意性地示出了根据本公开再一实施例的计算设备的结构示意图。

在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

下面将参考若干示例性实施方式来描述本公开的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本公开，而并非以任何方式限制本公开的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本公开的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

根据本公开的实施方式，提出了一种控件显示方法、介质、装置和计算设备。

在本文中，需要理解的是，所涉及的术语仅用于方便理解，并未表示对含义的限制。此外，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。

下面是本公开中涉及的术语说明：

划动控件：在本方案中，用于表示用户界面中的划动组件，即在应用程序的用户界面中(的一部分区域上)显示的可以划动并显示隐藏内容的UI组件，如购物车列表中通过左右/上下滑动展示收藏和删除选项的组件。

操作选项控件：在本方案中，用于表示用户界面中，提供给用户以进行操作或执行特定任务的可选项列表，操作选项控件通常以按钮、菜单、图标或其他交互元素的形式出现，用户可以通过点击、选择或执行相应的操作来完成特定任务，属于划动控件的一部分。

在本文中，需要理解的是，所涉及的术语仅用于方便理解，并未表示对含义的限制。此外，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。

需要说明的是，本公开所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据，并且相关数据的收集、使用和处理需要遵守相关法律法规和标准，并提供有相应的操作入口，供用户选择授权或者拒绝。

此外，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。

发明概述

本发明人发现，相关技术中，软件开发越来越多依赖开源社区提供的开发框架或各类依赖库等外部服务，通过调用这些外部服务为应用开发提供辅助工具和底层技术支持，以便于提高开发效率，为此，开发的应用的源代码层面也需要为这些外部服务提供兼容适配。

相关技术中，为方便应用程序的内容展示和交互，经常会需要为UI控件添加可左右划动，并展示隐藏的操作选项的需求。例如在电商应用的购物车列表页面中，通过左右划动单个商品所对应的控件，展示隐藏的收藏和删除功能的选项按钮。

现有Android端的划动显示功能，通常是基于Android端原生的View控件库开发，或通过相关的第三方库基于View体系开发的，但View体系本身只能支持控件简单划动，而无法支持基于控件划动的动画效果、划动阻尼感等特效，导致用户界面上的控件划动动作只能停留在比较原始粗糙的状态，导致用户操作时的体验较差，且新版本的Android端将逐步停止对View体系的支持，而作为替代的Jetpack Compose框架并没有提供实现划动的控件，使得Android端缺乏可用的支持划动显示功能的控件。

在本方案中，通过拦截当前用户界面中的划动事件，并提取其对应的第一时间参数信息以确定对应的目标划动控件，并确定其对应的显示状态，同时为其渲染划动效果，由此，使得目标划动控件的划动动作更加丰富，显著提升用户体验。

在介绍了本公开的基本原理之后，下面具体介绍本公开的各种非限制性实施方式。

应用场景总览

首先参考图1所示，在实际应用过程中，终端设备100接收到用户的划动操作110(也可以是点击操作或滑动条滚动操作)后，确定对应目标划动控件101，并根据划动操作110，调整目标划动控件101的显示状态(如显示对应操作选项控件102)，从而完成控件显示过程。

需说明的是，图1所示场景中终端设备、划动操作、目标划动控件和操作选项控件仅以一个为例进行示例说明，但本公开不以此为限制，也就是说，终端设备、划动操作、目标划动控件和操作选项控件的个数可以是任意的。

示例性方法

下面结合图1的应用场景，参考图2a至6b来描述根据本公开示例性实施方式的控件显示方法。需要注意的是，上述应用场景仅是为了便于理解本公开的精神和原理而示出，本公开的实施方式在此方面不受任何限制。相反，本公开的实施方式可以应用于适用的任何场景。

图2a为本公开一个实施例提供的控件显示方法的流程图。如图2a所示，本实施例提供的控件显示方法包括以下步骤：

步骤S201、响应于当前页面中的划动事件，确定划动事件对应的第一事件参数信息。

具体的，当前页面可以是桌面端的应用程序页面(如桌面端的音乐播放软件中的页面)，也可以是浏览器页面(如某地址对应的页面)。

当前页面中通常有一个或多个可以左右划动或上下划动的划动控件，以通过这类划动控件显示某些内容信息和其对应的操作选项(如购物车页面中，商品内容信息和对应的从购物车中删除相应商品的操作选项，就可以通过划动控件显示)。其中，内容信息显示在划动控件的主控件中，操作选项显示在划动控件的操作选项控件中。

通过提供这类包含主控件和操作选项控件的划动控件，可以在未进行划动操作时，将操作选项控件隐藏，以便增大主控件中内容信息的显示区域，增加内容信息的醒目程度，方便用户观察。

通过提供这类划动控件，以作为放置内容信息和操作选项的容器，同时能够方便地支持滑动显示功能，降低开发人员需要划动展示功能时的开发成本和工作量。

划动事件为当前页面对应处理器(或服务器，后统称为服务器)检测到的一种操作事件(即基于用户输入的操作而生成的事件)。服务器在接收到发生的操作事件时，会确定操作事件的种类属性(服务器在检测到发生操作事件时，会提取其对应的事件参数信息，其中包含有事件种类，根据事件种类，可以确定其为划动事件，则此时该操作事件对应的事件参数信息即第一事件参数信息)。

操作事件可以为触摸屏幕时触发(如系统平台为移动端的场景)，也可以是通过输入设备触发，如通过鼠标拖动划动控件时触发(如系统平台为桌面端的场景)。

步骤S202、基于第一事件参数信息，确定划动事件对应的目标划动控件。

其中，目标划动控件包括主控件和至少一个操作选项控件。

具体的，第一事件参数信息会包含划动事件发生的对应坐标信息(如起点坐标和/或终点坐标)，根据坐标信息，可以确定划动事件发生的位置。

同时当前页面中会记录各个划动控件所在的坐标范围，通过对应划动事件发生的位置和划动控件的坐标范围，可以确定划动事件对应的目标划动控件。

当前页面中可能存在多个划动控件，此时通过确定划动事件的发生位置，然后确定该发生位置对应的(某个划动控件所包含的)坐标范围，可以从多个划动控件中确定出划动事件对应的目标划动控件。

步骤S203、基于第一事件参数信息和目标划动控件的当前显示状态，确定目标划动控件的目标显示状态和状态切换动画效果。

具体的，根据划动事件的第一事件参数信息(如起点坐标和终点坐标)，结合目标划动控件的当前显示状态，可以确定目标划动控件所要移动的方向和距离，例如，起点坐标(10，20)、终点坐标(20，30)，对应目标划动控件为左右移动的划动控件，其当前显示位置为默认显示状态，则其要移动的方向和距离为向量(10，0)对应的方向和距离(此时只考虑划动事件对应的横向的坐标变化)。

由于划动控件整体的所在位置不会变化，因此需要根据移动的方向和距离，调整主控件的显示宽度，并调整操作选项控件的显示宽度。

根据主控件和操作选项控件的显示宽度，可以得到目标划动控件的目标显示状态。

基于当前显示状态和目标显示状态，可以添加对应的动画效果，使目标划动控件可以从当前显示状态连续地变化到目标显示状态，这个动画效果即状态切换动画效果。通过添加状态切换动画效果，以提高用户舒适度，进而提高用户体验。

步骤S204、基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态。

具体的，通过播放确定的状态切换动画效果，并随着动画效果，使目标划动控件的显示状态切换为目标显示状态，可以自如地完成划动事件对应的目标划动控件的状态切换过程，以保证用户的操作体验。

如图2b所示，其为目标划动控件基于状态切换动画效果切换显示状态的过程示意图。其中，当前页面200中，左一图为基于划动事件确定的目标划动控件201的当前显示状态，右一图为目标划动控件201的目标显示状态，左二图至右二图为目标划动控件201的状态切换动画效果，其中的操作选项控件202有文字淡入的动画效果，由此，通过添加状态切换动画效果，能够方便提供用户的操作体验。

根据本公开实施方式的控件显示方法，通过响应于当前页面中的划动事件，确定划动事件对应的第一事件参数信息，然后基于第一事件参数信息，确定划动事件对应的目标划动控件，再基于第一事件参数信息和目标划动控件的当前显示状态，确定目标划动控件的目标显示状态和状态切换动画效果；以基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态。由此，可以通过自动化拦截页面内的划动事件，实现对页面内同时存在多个可以划动的控件时，精准确定需要执行动作的划动控件，并对划动以展示隐藏的操作选项控件这一功能提供良好支持，同时通过添加状态切换动画效果，提供较好的动画效果支持，进而提升用户的使用体验。

图3a为本公开一个实施例提供的控件显示方法的流程图。如图3a所示，本实施例提供的控件显示方法包括以下步骤：

步骤S301、响应于当前页面中的划动事件，确定划动事件对应的第一事件参数信息。

具体的，第一事件参数信息包括划动事件的第一事件坐标(即划动事件的起点坐标)和第一移动参数(即基于起点坐标和划动事件的终点坐标计算得到的目标划动控件所需移动方向和距离，参考前述实施例)，以基于第一事件坐标确定目标划动控件，并基于第一移动参数，确定目标划动控件中的主控件的移动距离。

在本公开的一种实施例中，在基于当前页面中的划动事件进行响应之前，还包括：渲染当前页面中所有主控件所在区域。通过对主控件所在区域进行渲染，以保证目标划动控件的视觉效果，并记录主控件所在区域的坐标范围，以便后续基于该坐标范围检测划动事件拦截的目标区域。

进一步地，为方便描述，记主控件对应于目标划动控件中的头部区域，操作选项控件对应于目标划动控件中的尾部区域；当前显示状态包括头部区域当前的第一显示宽度和尾部区域当前的第二显示宽度；目标显示状态包括第一显示状态，第一显示状态包括头部区域的第一目标宽度和尾部区域的第二目标宽度；主控件包括默认显示状态，默认显示状态包括头部区域的默认显示宽度。

具体的，如图3b所示，其为当前页面中区域结构示意图。其中，当前页面300中只展示了目标划动控件，包括其主控件301和操作选项控件302，虚线框303即对应头部区域，虚线框304对应尾部区域，L1和L2分别为第一显示宽度和第二显示宽度(第一目标宽度和第二目标宽度与主控件、操作选项控件的对应关系相同，此处不再单独展示)。

其中，默认显示状态即操作选项控件所在的尾部区域不显示(宽度为零)，划动控件所在区域只显示主控件中内容信息的显示状态，此时头部区域的默认显示宽度即划动控件所在区域的宽度。

根据目标划动控件的当前显示状态不同，第一显示宽度可以为默认显示宽度，也可以小于默认显示宽度(此时尾部区域宽度不为零，操作选项控件处于显示/可见状态)。

步骤S302、基于第一事件坐标，确定划动事件触发范围与目标划动控件所在的区域相对应。

具体的，基于第一事件坐标，可以确定划动事件对应于当前页面中的一个划动控件所在区域，则该区域对应的划动控件即为目标划动控件。

步骤S303、确定划动事件对应于目标划动控件。

具体的，在实际应用中，通常基于安卓平台的Jetpack Compose框架(为方便后续描述，后续简称设定框架)执行目标划动控件的划动显示方法。此时，可以通过设定框架中的awaitDownAndSlop方法及awaitDrag方法判断划动事件，并基于划动事件，确定目标划动控件。

步骤S304、基于第一移动参数，确定目标划动控件的划动方向和划动进度。

具体的，在确定目标划动控件后，还可以基于第一事件参数信息中的第一移动参数，确定目标划动控件的划动方向和划动进度等信息。

进一步地，如图3c所示，其为确定划动控件划动方向与划动进度的方法流程图，其包括如下步骤：

步骤S3041、基于第一移动参数的正负值，确定目标划动控件的划动方向。

具体的，首先可以通过第一移动参数数值的正负值，确定目标划动控件的划动方向，具体划动方向与正负值的对应关系可以根据需求设置。

示例性的，在设定框架中，可以通过DragEvent.DragDelta中的delta属性的正负值来判断，如以负值为向左划动，正值为向右划动。

步骤S3042、若尾部区域至少有两个且头部区域的两端分别有至少一个尾部区域，则基于划动方向，确定待显示的操作选项控件对应的尾部区域。

具体的，一个主控件对应的操作选项控件可以只有一个，也可以同时存在多个(如当前页面为视频播放列表，则操作选项控件可以有多个，包括包含收藏、播放、评论等按钮所在的操作选项控件和选择框所在的操作选项控件)，多个操作选项控件可以共用一个尾部区域(如收藏、播放、评论等按钮所在的操作选项控件可以共用同一个尾部区域，也可以分别使用不同的尾部区域)，也可以分别使用不同的尾部区域(如选择框所在的操作选项控件和前述按钮所在的操作选项控件分别在主控件两端的尾部区域中)。同一个尾部区域内如果存在多个操作选项控件，则多个操作选项控件会根据尾部区域的显示宽度变化共同调整自身宽度，而一个尾部区域的显示宽度变化通常不会导致另一个尾部区域的显示宽度发生变化。

如图3d所示，其为存在多个操作选项控件的划动控件的显示状态示意图。其中，目标划动控件同时对应有三个操作选项控件，右侧两个相互连接的操作选项控件，左侧一个操作选项控件，中间图为当前页面300的目标划动控件只显示主控件301的状态(默认显示状态)，左侧图为目标划动控件向左划动时显示操作选项控件302和第二操作选项控件305的显示状态，右侧图为目标划动控件向右划动时显示第三操作选项控件306的显示状态。

如此时尾部区域有两个，且均位于头部区域同一侧，则随着向同一划动方向的划动距离增加，与头部区域相邻的尾部区域的显示宽度从零达到其预先配置的最大显示宽度时，与该尾部区域相邻的另一尾部区域的显示宽度才会从零开始增加。如图3d左侧图，随着滑动过程进行，先仅显示操作选项控件302，随着同一方向的划动过程持续，后显示第二操作选项控件305。

而当尾部区域至少有两个，且头部区域的两端分别至少有一个尾部区域时，会基于划动方向，确定待显示的尾部区域，如向左划动，则会显示右侧的尾部区域，向右划动，则会显示左侧的尾部区域。

步骤S3043、基于第一移动参数、第一显示宽度和第二显示宽度，确定头部区域的第一目标宽度和尾部区域的第二目标宽度。

具体的，由于目标划动控件在接收到划动事件时，可能处于默认显示状态(如所有尾部区域的显示宽度均为零)，也可能并不处于默认显示状态(如尾部区域的显示宽度不为零)，则此时需要根据第一移动参数、头部区域当前的第一显示宽度、尾部区域当前的第二显示宽度，确定其对应的第一目标宽度和第二目标宽度。

具体确定方式为，若划动方向与尾部区域相对于头部区域的方向相同，则基于第二显示宽度与第一移动参数的差值，确定第二目标宽度，直至第二目标宽度为零，并基于目标划动控件所在区域的宽度与第二目标宽度的差值，确定第一目标宽度；若划动方向与尾部区域相对于头部区域的方向相反，则基于第二显示宽度与第一移动参数的求和，确定第二目标宽度，直至第二目标宽度为尾部区域对应操作选项控件的最大显示宽度，并基于目标划动控件所在区域的宽度与第二目标宽度的差值，确定第一目标宽度。

对于存在多个尾部区域的情况，原理与此类似，此处不再赘述。

步骤S3044、基于第一目标宽度和默认显示宽度，确定划动进度。

具体的，可以将第一目标宽度与默认显示宽度的比值，作为划动进度，也可以基于第二目标宽度与对应操作选项控件的最大显示宽度的比值，确定划动进度；或者基于第一移动参数与第二目标宽度的比值，确定划动进度，任意方法均可，此处不做限制(三种计算方式得到的划动进度并不一定相等，但结果都可以作为划动进度进行分析和使用)。

实际应用中，还可以通过具体通过设定框架中的DragEvent.DragDelta功能中的delta属性的值除以操作选项容器的宽度得出划动进度。

在本公开的一种实施例中，在确定划动进度之后，还可以基于划动进度生成通知信息，并将通知信息发送到主控件和操作选项控件。

具体的，通过通知主控件和操作选项控件，以使其根据计算得到的第一目标宽度和第二目标宽度，调整自身显示宽度。

实际应用中，可以通过在设定框架中的修改目标划动控件的mutableState值，从而实现自动通知。相比于现有的View体系，设定框架中的State体系使得通过mutableState可以轻松完成划动进度的通知，而无需像View体系中一样手动注册回调并在值改变时手动触发回调。由此，可以简化开发过程，并且使目标划动控件的整个划动进度会更加的流畅，响应更加及时。

步骤S305、基于划动方向、划动进度和目标划动控件的当前显示状态，确定目标划动控件的第一显示状态。

具体的，通过前述步骤确定了目标划动控件中主控件和操作选项控件对应的显示宽度(即第一目标宽度和第二目标宽度)之后，即得到了目标划动控件的第一显示状态(第一显示状态也即是主控件和操作选项控件根据对应的显示宽度进行显示的状态)。

步骤S306、基于目标划动控件的当前显示状态和第一显示状态，确定目标划动控件的状态切换动画效果。

具体的，为了平滑的实现从当前显示状态到第一显示状态的过度，本方法会对目标划动控件的状态切换添加对应的动画效果，以体现划动过程的动态感和阻尼感。

在本公开的一种实施例中，可以确定状态切换动画效果为沿划动方向，将头部区域的当前宽度从第一显示宽度调整至第一目标宽度，将尾部区域的当前宽度从第二显示宽度调整至第二目标宽度，并基于划动方向，在目标划动控件的尾部区域展示操作选项控件。

具体的，实际应用中，可以根据DragEvent.DragDelta中的delta属性的值动态修改主控件中Modifier.offset的值目标划动控件的状态切换，并通过Annimatable添加动画效果。

步骤S307、渲染状态切换动画效果。

具体的，在需要提升动画效果时，还可以通过绘图引擎，对动画效果进行渲染，如添加淡入淡出效果，以增强动画表现力。

步骤S308、基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态。

具体的，实际应用中，伴随状态切换动画效果，可以通过设定框架中的DragEvent.DragDelta功能中的delta属性的值，动态修改主控件中Modifier.width的值，实现目标划动控件的状态切换。

进一步地，在执行状态切换过程中，还有需要在任意时刻停止的情况。其具体方式为：

响应于当前页面上的划动事件对应的划动停止事件，停止状态切换动画效果。

具体的，在划动事件进行过程中，也可能在任意时刻停止划动，如在移动端，用户的手指进行划动到一定位置后停下手指移动，此时当前页面就会检测到对应的划动停止事件。

实际应用中，可以通过设定框架中的DragEvent.DragStopped事件判断划动停止。

在接收到划动停止事件时，则会及时停止动态切换动画效果，并使目标划动控件直接切换到确定的第一显示状态，以便及时响应用户的后续操作。

根据本公开实施方式的控件显示方法，通过响应于划动事件，确定对应第一事件参数信息，确定对应目标划动控件，并计算对应划动方向、划动进度，以确定对应第一显示状态，然后生成对应状态切换动画效果并完成状态切换。由此，能够使当前页面的控件划动更加平滑，互动性更好，给用户带来较好的交互体验。

图4为本公开一个实施例提供的控件显示方法的流程图。如图4所示，本实施例提供的控件显示方法包括以下步骤：

步骤S401、响应于当前页面中的划动事件，确定划动事件对应的第一事件参数信息。

步骤S402、基于第一事件参数信息，确定划动事件对应的目标划动控件。

其中，目标划动控件包括相互连接的主控件和至少一个操作选项控件。

步骤S403、基于第一事件参数信息和目标划动控件的当前显示状态，确定目标划动控件的目标显示状态和状态切换动画效果。

步骤S404、基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态。

具体的，步骤S401至步骤S404与前述实施例中的对应步骤内容相同，此处不再赘述。

步骤S405、响应于当前页面上的点击事件，确定点击事件与目标划动控件对应，并确定点击事件对应的第二事件参数信息。

具体的，在完成状态切换后，若此时操作选项控件所在的尾部区域的显示宽度不为零，则此时操作选项控件可以基于点击事件进行响应，以执行对应的命令。

具体实现上，通过拦截当前页面中的点击事件，并确定该事件对应的坐标位于操作选项控件所在尾部区域且事件种类为点击事件，此时就会将该事件分发至目标划动控件的操作选项控件中。

实际应用中，可以通过设定框架中的awaitDownAndSlop方法拦截点击事件并通过Modifier.clickable响应点击事件。

步骤S406、将第二事件参数信息分发至目标划动控件，以使目标划动控件基于第二事件参数信息执行点击事件对应命令。

具体的，将点击事件分发至目标划动控件的操作选项控件中后，会促发其执行开发者注册的对应事件命令。如操作选项控件为收藏按钮，则点击该按钮后，会执行对应的收藏命令。

步骤S407、基于目标显示状态和默认显示状态，确定目标划动控件的第二状态切换动画效果。

具体的，根据实际需求，目标划动控件可以在执行了点击事件对应命令后，自动恢复至默认显示状态(如隐藏操作选项空间)，以便保证当前页面的整体显示效果(如使所有主控件宽度恢复一致，相互对齐)。

实际应用中，可以通过设定框架中SwipeableState.snapTo功能，动态的修改offset，从而响应式的修改主控件的位移实现。且此时可以会通过设定框架中的Annimatable添加动画效果，从而使得归位过程的视觉体验更流畅和舒适。

步骤S408、基于第二状态切换动画效果，将目标划动控件从目标显示状态切换至默认显示状态。

具体的，在切换目标划动控件显示状态时，还可以同步对动画效果进行渲染，这一过程与前述步骤中响应了划动进度变化后的UI渲染(即动画效果渲染)相同，此处不再赘述。

根据本公开实施方式的控件显示方法，在完成目标划动控件的显示状态切换后，若操作选项控件所在的尾部区域的显示宽度不为零，则会响应于针对目标划动控件上的操作选项控件的点击事件，基于点击事件，使操作选项控件执行对应命令。由此，使得目标划动控件能够在显示状态变化后，使显示出来的操作选项控件部分能够完成与用户的交互，并执行对应的交互动作，从而使划动控件整体具有可操作性，在保证显示效果的同时，提高了用户的使用体验。

图5a为本公开一个实施例提供的控件显示方法的流程图。如图5a所示，本实施例提供的控件显示方法包括以下步骤：

步骤S501、确定当前页面中处于展开状态的划动控件，并将处于展开状态的划动控件的信息添加至目标列表。

其中，展开状态用于表示操作选项控件对应的尾部区域的当前显示宽度不为零的状态。

具体的，对于当前页面中存在多个划动控件的情况，如果各个划动控件间不配置互斥逻辑，就可能存在多个划动控件处于操作选项控件所在尾部区域宽度不为零的状态，就会显得当前页面较为混乱，用户视觉体验较差。

而添加了互斥逻辑，则能有效解决这个问题。示例性的，当前页面为购物车管理页面，划动控件对应于添加到购物车的各个商品，在划动开一个商品后(以显示其对应的操作选项控件)，如果此时用户未将其划回而直接划动另外一个商品。舒适的用户体验是要先将上一个商品(的操作选项控件)复位，保证同时段只有一个商品被划动开(并展示其操作选项)。

实际应用中，可以通过在设定框架中，创建一个mutableState变量用来保存当前展开的划动组件，即得到目标列表。

步骤S502、响应于当前页面中的划动事件，确定划动事件对应的第一事件参数信息。

步骤S503、基于第一事件参数信息，确定划动事件对应的目标划动控件。

其中，目标划动控件包括相互连接的主控件和至少一个操作选项控件。

具体的，步骤S502至步骤S503与前述实施例中的对应步骤内容相同，此处不再赘述。

步骤S504、若基于目标列表确定存在处于展开状态的划动控件，则将处于展开状态的划动控件的显示状态调整为初始状态。

其中，初始状态用于表示操作选项控件对应的尾部区域的当前宽度为零的状态。

具体的，在考虑互斥逻辑的情况下，若目标划动控件并非处于目标列表中的划动控件，则需要首先将目标列表中的划动控件归位(即将其显示状态调整为初始状态)。

实际应用中，可以通过判断mutableState变量是否为空，在其非空的情况下，通过设定框架中的SwipeableState.snapTo功能将其复位。

步骤S505、若基于目标列表确定不存在处于展开状态的划动控件，将目标划动控件的信息添加至目标列表中。

具体的，若目标列表为空，则不存在处于展开状态的划动控件，此时就需要将目标划动控件添加至目标列表中，方便后续判断。

具体实现上，可以将目标划动控件相关信息(如标签或识别码)添加到目标列表中。

实际应用中，可以通过在设定框架中的awaitDrag结束拦截操作，使得其后续划动逻辑能继续执行。

步骤S506、基于第一事件参数信息和目标划动控件的当前显示状态，确定目标划动控件的目标显示状态和状态切换动画效果。

步骤S507、基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态。

具体的，步骤S506至步骤S507与前述实施例中的对应步骤内容相同，此处不再赘述。

步骤S508、响应于当前页面中的主列表滚动事件，确定主列表滚动事件对应的第三事件参数信息。

具体的，互斥逻辑除了前述步骤中多个划动控件被划开的场景，还有一种场景是一个划动控件被划开后，用户同样未将其划回而是直接划动当前页面的滚动条。这种情况下同样需要将划开的划动控件先归位(即使其恢复默认显示状态)，再基于滚动条的划动，调整当前页面的显示内容，以保证用户体验。此时，就需要主列表滚动(主列表也即是划动控件所在列表，主列表滚动也即是前述滚动条划动对应事件)的互斥逻辑。

如图5b所示，其为基于主列表滚动事件的划动控件互斥逻辑示意图，当前页面中存在划开的划动控件501(如左侧图)，随着滑动条502中的滑块503移动，划动控件501会先复位(如中间图)，再跟随滑块503移动切换主列表显示内容(如右侧图)。

实际应用中，可以通过设定框架中的Modifier.nestedScroll方法来拦截主列表的滚动事件。

步骤S509、基于第三事件参数信息，确定目标划动控件处于主列表滚动事件对应的区域。

具体的，根据主列表滚动事件中滚动条对应的区域范围，可以确定目标划动控件视为主列表滚动事件对应的区域。如当前页面中可能存在不同区域(如上下两部分)，其中一部分(如下面部分)是基于滚动条滚动会发生显示内容变化的区域(滚动条滚动即主列表滚动事件)，另一部分(如上面部分)不受滚动条滚动的影响，此时，若目标划动控件属于不受影响的部分(如上面部分)，则不需要改动目标划动控件所处的显示状态；若目标划动控件属于受影响的部分(如下面部分)，则需要将目标划动控件所处的显示状态改为默认显示状态(即将目标划动控件复位)。

在本公开的另一种实施例中，目标划动控件无论是否处于主列表滚动事件对应区域，若当前页面出现主列表滚动事件时，都需要将目标划动控件复位。

步骤S510、将目标划动控件的显示状态调整为默认显示状态。

具体的，对目标划动控件进行复位，以便保证当前页面的整体性。

实际应用中，可以通过设定框架中的NestedScrollConnection方法中的onPreScroll，以感知列表滚动，并通过SwipeableState.snapTo将目标划动控件复位。

进一步地，若在检测到主列表滚动事件时的响应动作包括了对主列表滚动事件的拦截，则对目标划动控件进行复位后，需要放行拦截的主列表滚动事件。

具体的，在目标划动控件复位后，就可以执行主列表滚动事件，完成当前页面显示内容的变化。

实际应用中，可以通过设定框架中的NestedScrollConnection方法中的onPreScroll，并返回Offset.Zero，以表示不拦截事件，放行主列表滚动事件。

步骤S508至步骤S510为与步骤S502至步骤S507相平行的可选步骤，本领域技术人员可以根据实际情况选择对应步骤执行。

根据本公开实施方式的控件显示方法，通过配置目标列表管理当前页面中处于展开状态的划动控件，并在接收到划动事件时，基于划动事件对应的目标划动控件是否在目标列表中，确定处理策略，在接收到主列表滚动事件时，基于目标划动控件是否处于主列表滚动事件涉及范围，确定是否需要将目标划动控件复位。由此，能够为当前页面的划动控件添加互斥逻辑，保证当前页面中始终只有一个划动控件处于展开状态，进而保证当前页面的整体性，方便用户识别，提高用户使用体验。

图6a为本公开一个实施例提供的控件显示方法的流程图。如图6a所示，本实施例提供的控件显示方法包括以下步骤：

步骤S601、基于当前系统平台对应的拦截组件，拦截当前页面中的目标事件，并确定目标事件对应的事件参数信息。

其中，目标事件包括划动事件，事件参数信息包括所述第一事件参数信息。

具体的，本公开实施例提供的控件显示方法，基于跨平台框架实现，以实现Android单端开发使用后，同时支持Android平台、iOS平台及Desktop平台等主流系统平台的跨平台应用。

进一步地，跨平台框架为Android平台中的JetBrains Compose框架(简称Compose框架，也即是前述设定框架)。其为是Google推出的用于构建现代化用户界面的工具包。与其相对的是，现有的用户界面控件显示功能，一般是基于View框架开发的，后者一种在Android开发中使用的传统UI框架，包括XML布局和View类等。Compose框架可以视为View框架的一种新的替代方案，用于更简洁、更灵活、更高效地构建用户界面。

相对于View框架，Compose框架采用了现代的声明式编程方式，开发者可以使用类似于DSL(领域特定语言)的语法，通过描述UI的外观和行为来构建界面，并可以使用Compose框架提供的组件、修饰符和布局函数来构建界面，并通过预览工具实时预览和调整界面效果。而View框架采用了传统的命令式编程方式，开发者需要开发者手动编写布局文件(XML)和相应的代码，通过findViewById()等方法来找到和操作界面上的组件，并且每次查看界面效果都需要进行编译和应用打包，开发体验差，且对各个事件的响应无法实时实现，造成响应滞后，用户体验差等问题。由此，Compose框架在开发过程中，开发效率和对开发者的友好程度远好于现有View框架，在应用中，用户体验也远好于现有View框架。

但单纯的Compose框架本身没有对于划动能力的支持(View框架同样没有直接提供对划动相关功能的支持，但有基于View框架的第三方库提供基础的划动功能支持，但随着Android平台的更新，其对View框架的支持将逐步停止，导致相应第三方库也将无法使用)，故本公开实施例中提供的是基于Compose框架，开发得到支持控件显示功能的UI组件，以实现本公开任意实施例中的控件显示方法。

进一步地，针对不同系统平台，用于拦截目标事件的组件可以有不同情况(目标事件包括前述实施例中涉及的划动事件、划动停止事件、点击事件、主列表滚动事件)。

例如，当前系统平台为Android平台时，当前系统平台对应的拦截组件为onTouchEvent组件；当前系统平台为iOS平台时，当前系统平台对应的拦截组件为UITapGestureRecognizer组件；当前系统平台为Desktop平台时，当前系统平台对应的拦截组件为EventFilter组件。

本领域技术人员可以根据实际情况需求，配置调用对应的组件执行拦截动作。

步骤S602、将目标事件转化为跨平台框架下的统一目标事件。

具体的，不同平台中对同一事件的命名可能存在差异，但Compose框架基于Android平台开发，故需要将这些时间统一转化为Android平台的事件(即统一目标事件)，如将不同平台中拦截得到的划动事件统一转化为Android平台中的划动事件，并获取事件对应的第一事件参数信息，以便后续统一处理。为方便理解，后续基于统一目标事件为划动事件说明后续步骤。

步骤S603、基于统一目标事件的事件参数信息，确定统一目标事件对应的目标划动控件。

具体的，当统一目标事件为划动事件时，本步骤即与图2a所示实施例中的对应步骤内容相同，此处不再赘述。

步骤S604、基于事件参数信息和目标划动控件的当前显示状态，确定目标划动控件的目标显示状态和状态切换动画效果。

具体的，当统一目标事件为划动事件、划动停止事件、主列表滚动事件时，即可执行步骤S604至步骤S605中的对应步骤内容。在确定状态切换动画效果时，可以根据系统平台不同，通过跨平台框架下的不同渲染引擎，对动画效果进行渲染。

具体实现上，是基于跨平台框架中的对应渲染引擎，对主控件和操作选项控件的显示状态进行渲染。其中，当前系统平台为Android平台或iOS平台时，当前系统平台对应的渲染引擎为Skia绘图引擎；当前系统平台为Desktop平台时，当前系统平台对应的渲染引擎为JavaFX绘图引擎。

这些渲染引擎为系统平台提供的绘制和渲染能力，能够将Compose框架开发过程中提供的描述代码转化为不同系统平台所支持的原生界面组件或渲染指令，从而充分保证状态切换动画效果在不同平台上的显示效果的一致性，保证用户使用体验，如图6b所示，其为包含划动控件的当前页面在不同平台的显示状态示意图，其中左侧图和右侧图分别为不同移动平台(分别为iso平台和android平台)，中间图为desktop平台，由图中可知，在不同平台中，当前页面及划动控件具有一致的显示效果。

步骤S605、基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态。

具体的，本步骤与图2a所示实施例中的对应步骤内容相同，此处不再赘述。

步骤S606、将统一目标事件发送到跨平台框架中，并将统一目标事件对应的参数信息发送到目标划动控件，以使目标划动控件响应统一目标事件。

具体的，对于统一目标事件是点击事件等需要目标划动控件响应的事件的情况，还会将得到的统一目标事件对应的参数信息(如前述实施例中的第二事件参数信息)发送到目标划动控件，以使目标划动控件进行响应(如执行点击事件对应的命令)。

步骤S606可以为与步骤S604至步骤S605相平行的可选步骤，本领域技术人员可以根据需要，从中选择任意步骤执行。

根据本公开实施方式的控件显示方法，通过基于当前系统平台对应的拦截组件，拦截当前页面中的目标事件，并确定目标事件对应的事件参数信息，然后将目标事件转化为跨平台框架下的统一目标事件，以基于统一目标事件，确定目标划动控件，再基于统一目标事件的种类，执行对应动作。由此，能够使得开发者开发一套代码后，同时支持在多个平台的控件显示功能，且能保证不同平台的显示效果相同，由此，能够大幅降低了移动端应用的开发成本，并加快了控件对应功能的交付进度，在不同平台上实现一致性和兼容性。

示例性介质

在介绍了本公开示例性实施方式的方法之后，接下来，参考图7对本公开示例性实施方式的存储介质进行说明。

参考图7所示，描述了根据本公开的实施方式的用于实现上述方法的程序产品70，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本公开的程序产品不限于此。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质。

可以以一种或多种程序设计语言的任意组合来编写用于执行本公开公开操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备。

示例性装置

在介绍了本公开示例性实施方式的介质之后，接下来，参考图8对本公开示例性实施方式的控件显示装置进行说明，用于实现上述任一方法实施例中的控件显示方法，其实现原理和技术效果与前述对应方法的实施例类似，在此不再赘述。

本公开提供的控件显示装置800，包括：

拦截模块810，用于响应于当前页面中的划动事件，确定划动事件对应的第一事件参数信息；

定位模块820，用于基于第一事件参数信息，确定划动事件对应的目标划动控件，目标划动控件包括主控件和至少一个操作选项控件；

处理模块830，用于基于第一事件参数信息和目标划动控件的当前显示状态，确定目标划动控件的目标显示状态和状态切换动画效果；

更新模块840，用于基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态。

在本公开的一种示例性实施例中，定位模块820具体用于：若第一事件参数信息包括划动事件的第一事件坐标；基于第一事件坐标，确定划动事件触发范围与目标划动控件所在的区域相对应；确定划动事件对应于目标划动控件。

在本公开的一种示例性实施例中，处理模块830具体用于：若第一事件参数信息包括第一移动参数；目标显示状态包括第一显示状态；基于第一移动参数，确定目标划动控件的划动方向和划动进度；基于划动方向、划动进度和目标划动控件的当前显示状态，确定目标划动控件的第一显示状态；基于目标划动控件的当前显示状态和第一显示状态，确定目标划动控件的状态切换动画效果；渲染状态切换动画效果。

在本公开的一种示例性实施例中，处理模块830具体包括：主控件对应于目标划动控件中的头部区域，操作选项控件对应于目标划动控件中的尾部区域；当前显示状态包括头部区域当前的第一显示宽度和尾部区域当前的第二显示宽度；第一显示状态包括头部区域的第一目标宽度和尾部区域的第二目标宽度；主控件包括默认显示状态，默认显示状态包括头部区域的默认显示宽度。

在本公开的一种示例性实施例中，处理模块830具体用于：基于第一移动参数的正负值，确定目标划动控件的划动方向；基于第一移动参数、第一显示宽度和第二显示宽度，确定头部区域的第一目标宽度和尾部区域的第二目标宽度；基于第一目标宽度和默认显示宽度，确定划动进度；更新模块840具体用于：确定状态切换动画效果为沿划动方向，将头部区域的当前宽度从第一显示宽度调整至第一目标宽度，将尾部区域的当前宽度从第二显示宽度调整至第二目标宽度，并基于划动方向，在目标划动控件的尾部区域展示操作选项控件。

在本公开的一种示例性实施例中，处理模块830还用于：基于第一移动参数的正负值，确定目标划动控件的划动方向之后，若尾部区域至少有两个且头部区域的两端分别有至少一个尾部区域，则基于划动方向，确定待显示的操作选项控件对应的尾部区域。

在本公开的一种示例性实施例中，处理模块830还用于：述基于第一目标宽度和默认显示宽度，确定划动进度之后，基于划动进度生成通知信息，并将通知信息发送到主控件和操作选项控件。

在本公开的一种示例性实施例中，更新模块840还用于：基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态之后，响应于当前页面上的点击事件，确定点击事件与目标划动控件对应，并确定点击事件对应的第二事件参数信息；将第二事件参数信息分发至目标划动控件，以使目标划动控件基于第二事件参数信息执行点击事件对应命令；基于目标显示状态和默认显示状态，确定目标划动控件的第二状态切换动画效果；基于第二状态切换动画效果，将目标划动控件从目标显示状态切换至默认显示状态。

在本公开的一种示例性实施例中，拦截模块810还用于：响应于当前页面中的划动事件，确定划动事件对应的第一事件参数信息之前，确定当前页面中处于展开状态的划动控件，并将处于展开状态的划动控件的信息添加至目标列表，展开状态用于表示操作选项控件对应的尾部区域的当前显示宽度不为零的状态；定位模块820还用于：基于第一事件参数信息，确定划动事件对应的目标划动控件之后，若基于目标列表确定存在处于展开状态的划动控件，则将处于展开状态的划动控件的显示状态调整为初始状态，初始状态用于表示操作选项控件对应的尾部区域的当前宽度为零的状态；若基于目标列表确定不存在处于展开状态的划动控件，将目标划动控件的信息添加至目标列表中。

在本公开的一种示例性实施例中，拦截模块810还用于：若基于目标列表确定不存在处于展开状态的划动控件，将目标划动控件的信息添加至目标列表中之后，响应于当前页面中的主列表滚动事件，确定主列表滚动事件对应的第三事件参数信息；基于第三事件参数信息，确定目标划动控件处于主列表滚动事件对应的区域；将目标划动控件的显示状态调整为默认显示状态。

在本公开的一种示例性实施例中，更新模块840还用于：响应于当前页面上的划动事件对应的划动停止事件，停止状态切换动画效果。

在本公开的一种示例性实施例中，拦截模块810还用于：基于第一事件参数信息，确定划动事件对应的目标划动控件之前，若当前页面对应于当前系统平台，基于当前系统平台对应的拦截组件，拦截当前页面中的目标事件，并确定目标事件对应的事件参数信息，目标事件包括划动事件，事件参数信息包括第一事件参数信息；将目标事件转化为跨平台框架下的统一目标事件；更新模块840还用于：基于状态切换动画效果，将目标划动控件从当前显示状态切换至目标显示状态之后，将统一目标事件发送到跨平台框架中，并将统一目标事件对应的事件参数信息发送到目标划动控件，以使目标划动控件响应统一目标事件。

在本公开的一种示例性实施例中，更新模块840还包括：当前系统平台为Android平台时，当前系统平台对应的拦截组件为onTouchEvent组件；当前系统平台为iOS平台时，当前系统平台对应的拦截组件为UITapGestureRecognizer组件；当前系统平台为Desktop平台时，当前系统平台对应的拦截组件为EventFilter组件；跨平台框架为Android平台中的JetBrains Compose框架。

在本公开的一种示例性实施例中，更新模块840还用于：基于跨平台框架中的对应渲染引擎，对主控件和操作选项控件的显示状态进行渲染。

在本公开的一种示例性实施例中，更新模块840还包括：当前系统平台为Android平台或iOS平台时，当前系统平台对应的渲染引擎为Skia绘图引擎；当前系统平台为Desktop平台时，当前系统平台对应的渲染引擎为JavaFX绘图引擎。

示例性计算设备

在介绍了本公开示例性实施方式的方法、介质和装置之后，接下来，参考图9对本公开示例性实施方式的计算设备进行说明。

图9显示的计算设备90仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图9所示，计算设备90以通用计算设备的形式表现。计算设备90的组件可以包括但不限于：上述至少一个处理单元901、上述至少一个存储单元902，连接不同系统组件(包括处理单元901和存储单元902)的总线903。

总线903包括数据总线、控制总线和地址总线。

存储单元902可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)9021和/或高速缓存存储器9022，可以进一步包括非易失性存储器形式的可读介质，例如只读存储器(ROM)9023。

存储单元902还可以包括具有一组(至少一个)程序模块9024的程序/实用工具9025，这样的程序模块9024包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

计算设备90也可以与一个或多个外部设备904(例如键盘、指向设备等)通信。这种通信可以通过输入/输出(I/O)接口905进行。并且，计算设备90还可以通过网络适配器907与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图9所示，网络适配器907通过总线903与计算设备90的其它模块通信。应当理解，尽管图中未示出，可以结合计算设备90使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

应当注意，尽管在上文详细描述中提及了供应链策略确定装置和对象评分模型训练装置的若干单元/模块或子单元/模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

此外，尽管在附图中以特定顺序描述了本公开方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

虽然已经参考若干具体实施方式描述了本公开的精神和原理，但是应该理解，本公开并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本公开旨在涵盖所附权利要求的精神和范围内所包括的各种修改和等同布置。

Claims (10)

1.一种控件显示方法，其特征在于，所述方法包括：

响应于当前页面中的划动事件，确定所述划动事件对应的第一事件参数信息；

基于所述第一事件参数信息，确定所述划动事件对应的目标划动控件，所述目标划动控件包括主控件和至少一个操作选项控件；

基于所述第一事件参数信息和所述目标划动控件的当前显示状态，确定所述目标划动控件的目标显示状态和状态切换动画效果；

基于所述状态切换动画效果，将所述目标划动控件从当前显示状态切换至所述目标显示状态。

2.根据权利要求1所述的方法，其特征在于，所述第一事件参数信息包括划动事件的第一事件坐标；

所述基于所述第一事件参数信息，确定所述划动事件对应的目标划动控件，包括：

基于所述第一事件坐标，确定所述划动事件触发范围与所述目标划动控件所在的区域相对应；

确定所述划动事件对应于所述目标划动控件。

3.根据权利要求1所述的方法，其特征在于，所述第一事件参数信息包括第一移动参数；所述目标显示状态包括第一显示状态；

所述基于所述第一事件参数信息和所述目标划动控件的当前显示状态，确定所述目标划动控件的目标显示状态和状态切换动画效果，包括：

基于所述第一移动参数，确定所述目标划动控件的划动方向和划动进度；

基于所述划动方向、划动进度和所述目标划动控件的当前显示状态，确定所述目标划动控件的第一显示状态；

基于所述目标划动控件的当前显示状态和所述第一显示状态，确定所述目标划动控件的状态切换动画效果；

渲染所述状态切换动画效果。

4.根据权利要求3所述的方法，其特征在于，所述主控件对应于所述目标划动控件中的头部区域，所述操作选项控件对应于所述目标划动控件中的尾部区域；

所述当前显示状态包括所述头部区域当前的第一显示宽度和所述尾部区域当前的第二显示宽度；

所述第一显示状态包括所述头部区域的第一目标宽度和所述尾部区域的第二目标宽度；

所述主控件包括默认显示状态，所述默认显示状态包括所述头部区域的默认显示宽度。

5.根据权利要求4所述的方法，其特征在于，所述基于所述第一移动参数，确定所述目标划动控件的划动方向和划动进度，包括：

基于所述第一移动参数的正负值，确定所述目标划动控件的划动方向；

基于所述第一移动参数、所述第一显示宽度和所述第二显示宽度，确定所述头部区域的第一目标宽度和所述尾部区域的第二目标宽度；

基于所述第一目标宽度和所述默认显示宽度，确定所述划动进度；

所述基于所述目标划动控件的当前显示状态和所述第一显示状态，确定所述目标划动控件的状态切换动画效果，包括：

确定所述状态切换动画效果为沿所述划动方向，将所述头部区域的当前宽度从第一显示宽度调整至所述第一目标宽度，将尾部区域的当前宽度从第二显示宽度调整至所述第二目标宽度，并基于所述划动方向，在所述目标划动控件的尾部区域展示所述操作选项控件。

6.根据权利要求4所述的方法，其特征在于，所述基于所述第一移动参数的正负值，确定所述目标划动控件的划动方向之后，还包括：

若所述尾部区域至少有两个且所述头部区域的两端分别有至少一个尾部区域，则基于所述划动方向，确定待显示的操作选项控件对应的尾部区域。

7.根据权利要求4所述的方法，其特征在于，所述基于所述第一目标宽度和所述默认显示宽度，确定所述划动进度之后，还包括：

基于所述划动进度生成通知信息，并将所述通知信息发送到所述主控件和所述操作选项控件。

8.一种计算机可读存储介质，包括：所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如权利要求1至7中任一项所述的控件显示方法。

9.一种控件显示装置，其特征在于，所述装置包括：

拦截模块，用于响应于当前页面中的划动事件，确定所述划动事件对应的第一事件参数信息；

定位模块，用于基于所述第一事件参数信息，确定所述划动事件对应的目标划动控件，所述目标划动控件包括主控件和至少一个操作选项控件；

处理模块，用于基于所述第一事件参数信息和所述目标划动控件的当前显示状态，确定所述目标划动控件的目标显示状态和状态切换动画效果；

更新模块，用于基于所述状态切换动画效果，将所述目标划动控件从当前显示状态切换至所述目标显示状态。

10.一种计算设备，包括：至少一个处理器；

以及与至少一个处理器通信连接的存储器；

其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使计算设备执行如权利要求1至7中任一项所述的控件显示方法。