阅读说明：本技术 一种Flickable视窗中滚动条的实现方法及电子设备 (The implementation method and electronic equipment of scroll bar in a kind of Flickable form ) 是由 时学凯 张文明 陈少杰 于 2018-05-16 设计创作，主要内容包括：本公开提供了一种Flickable视窗中滚动条的实现方法及电子设备,方法包括：为滚动条控件设置一个第一子控件,第一子控件用于设定滚动条的属性；为第一子控件设置一个第二子控件,第二子控件关联于鼠标；通过第二子控件获取所述鼠标的移动参数；根据鼠标的移动参数,计算滚动条的滚动距离；根据滚动条的滚动距离,通过第一子控件设定滚动条在Flickable视窗中的位置。本公开能够灵活地设置Flickable视窗中滚动条的风格。(Present disclose provides the implementation method and electronic equipment of scroll bar in a kind of Flickable form, method includes: that first child control is arranged for scroll bar control, and the first child control is used to set the attribute of scroll bar；One the second child control is set for the first child control, the second child control is associated with mouse；The moving parameter of the mouse is obtained by the second child control；According to the moving parameter of mouse, the rolling distance of scroll bar is calculated；According to the rolling distance of scroll bar, position of the scroll bar in Flickable form is set by the first child control.The disclosure can flexibly set the style of scroll bar in Flickable form.)

一种Flickable视窗中滚动条的实现方法及电子设备

技术领域

本公开涉及一种Flickable视窗中滚动条的实现方法及电子设备。

背景技术

Flickable视窗是问卷的标记语言(Questionnaire Markup Language，QML)提供的一个较小的视窗，用于显示一个较大的内容，该内容可在这个Flickable视窗中进行拖动。虽然当前Flickable视窗中具有滚动条控件，但在视觉效果上该滚动条的外形较为单一，且无法修改。

发明内容

本公开鉴于上述问题，提供一种Flickable视窗中滚动条的实现方法及电子设备，能够灵活地设置Flickable视窗中滚动条的风格。

本公开的一个方面提供了一种Flickable视窗中滚动条的实现方法，所述Flickable视窗中包括有滚动条控件，方法包括：为所述滚动条控件设置一个第一子控件，所述第一子控件用于设定滚动条的属性；为所述第一子控件设置一个第二子控件，所述第二子控件关联于鼠标；通过所述第二子控件获取所述鼠标的移动参数；根据所述鼠标的移动参数，计算所述滚动条的滚动距离；根据所述滚动条的滚动距离，通过所述第一子控件设定所述滚动条在Flickable视窗中的位置。

可选地，所述滚动条的属性至少包括滚动条ID、滚动条宽度、滚动条高度、滚动条颜色及滚动条两端形状。

可选地，方法还包括：对所述Flickable视窗中的内容进行移动。

可选地，根据所述鼠标的移动参数，计算所述滚动条的滚动距离，包括：当所述鼠标拖动所述滚动条移动时，所述滚动条的滚动距离即为鼠标的移动距离；当所述鼠标处于所述Flickable视窗中拖动时，所述滚动条的滚动距离即为Flickable视窗中内容滑动的距离。

可选地，所述滚动条为竖直滚动条和/或水平滚动条。

本公开另一方面提供一种电子设备，包括：显示器，用以显示Flickable视窗，所述Flickable视窗中包括有滚动条控件；处理器；存储器，其存储有计算机可执行程序，该程序在被所述处理器执行时，使得所述处理器执行：为所述滚动条控件设置一个第一子控件，所述第一子控件用于设定滚动条的属性；为所述第一子控件设置一个第二子控件，所述第二子控件关联于鼠标；通过所述第二子控件获取所述鼠标的移动参数；根据所述鼠标的移动参数，计算所述滚动条的滚动距离；根据所述滚动条的滚动距离，通过所述第一子控件设定所述滚动条在Flickable视窗中的位置。

可选地，所述滚动条的属性至少包括滚动条ID、滚动条宽度、滚动条高度、滚动条颜色及滚动条两端形状。

可选地，所述处理器还执行：对所述Flickable视窗中的内容进行移动。

可选地，所述处理器根据所述鼠标的移动参数，计算所述滚动条的滚动距离，包括：当所述鼠标拖动所述滚动条移动时，所述滚动条的滚动距离即为鼠标的移动距离；当所述鼠标处于所述Flickable视窗中拖动时，所述滚动条的滚动距离即为Flickable视窗中内容滑动的距离。

可选地，所述滚动条为竖直滚动条和/或水平滚动条。

附图说明

为了更完整地理解本公开及其优势，现在将参考结合附图的以下描述，其中：

图1示意性示出了本公开的实施例的Flickable视窗的示意图。

图2示意性示出了本公开实施例提供的Flickable视窗中滚动条的实现方法流程图。

图3示意性示出了根据本公开的电子设备的框图。

具体实施方式

根据结合附图对本公开示例性实施例的以下详细描述，本公开的其它方面、优势和突出特征对于本领域技术人员将变得显而易见。

在本公开中，术语“包括”和“含有”及其派生词意为包括而非限制；术语“或”是包含性的，意为和/或。

在本说明书中，下述用于描述本公开原理的各种实施例只是说明，不应该以任何方式解释为限制公开的范围。参照附图的下述描述用于帮助全面理解由权利要求及其等同物限定的本公开的示例性实施例。下述描述包括多种具体细节来帮助理解，但这些细节应认为仅仅是示例性的。因此，本领域普通技术人员应认识到，在不背离本公开的范围和精神的情况下，可以对本文中描述的实施例进行多种改变和修改。此外，为了清楚和简洁起见，省略了公知功能和结构的描述。此外，贯穿附图，相同参考数字用于相似功能和操作。

图1示意性示出了本公开的实施例的Flickable视窗的示意图。具体地，如图1A所示，Flickable视窗里面有四条色带，即红、黑、橘、粉，图1A中只显示完整的红、黑色带和不完整的橘色色带，其他内容在下面，被Flickable遮挡了，故未显示。利用鼠标可以将Flickable视窗中的内容在这个小视窗中进行拖动，使下面被遮挡的部分显示出来，之前显示的部分被遮挡，如图1B所示，同时滚动鼠标滚轮也可以调节Flickable展示的内容。为了增强交互性，给Flickable控件添加一个滚动条，当鼠标上下拖动滚动条时，Flickable也会随着上下滑动，当鼠标上下拖动Flickable时，滚动条也会随着上下移动，图1C是添加QML原生滚动条的效果。

另外，为了在本公开实施例中能够清楚地描述本公开的技术方案，将采用计算机代码及代码注释的形式来解释。Flickable视窗有几个关键的属性需要了解：height表示Flickable视窗的高，即可视范围的高；contentHeight表示视窗内容content的高，在图1中，视窗内容content表示四条彩带，contentHeight表示四条彩带的高之和；contentY表示content在Flickable中y轴坐标值。当鼠标上下拖动Flickable时，其实是修改了Flickable的contentY值，从而使Flickable展示不同的内容。其中contentY的取值范围为[0,contentHeight-height],当contentY＝0时，Flickable显示最上面的内容；当contentY＝contentHeight-height时，Flickable显示最下面的内容。

该滚动条控件的代码如下：

上述的滚动条虽然能够满足功能的需求，却无法修改它的风格，比如高度、宽度、滑动范围、颜色等。

图2示意性示出了本公开实施例提供的Flickable视窗中滚动条的实现方法流程图。

如图2所示，方法包括以下操作：

S1，为滚动条控件设置一个第一子控件，所述第一子控件用于设定滚动条的属性。

在上述步骤中，为了实现可自定义风格的滚动条，需要定义一个Rectangle控件(第一子控件)，它是nobleScrollBar控件的子控件，id为button，由它来控制滚动条的高、宽和颜色等属性，代码如下：

Rectangle{

id:button

width:width_

height:height_

color:color_

radius:width_/2

y:spacing_}

其中width_，height_,color_,spacing_是滚动条的属性，设置radius是为了设置滚动条的两端为圆角，y为滚动条在Y轴中所处的位置，spacing_表示滚动条距离Flickable上下边缘最小间隙。

S2，为第一子控件设置一个第二子控件，第二子控件关联于鼠标。

在上述步骤中，为了实现滚动条与鼠标的交互，需要给id为button的Rectangle控件增加一个子控件MouseArea，代码如下：

MouseArea{

drag.target:button

drag.axis:Drag.YAxis

drag.minimumY:spacing_

drag.maximumY:nobleScrollBar.height-button.height-spacing_

anchors.fill:button

cursorShape:Qt.PointingHandCursor

}

设置MouseArea的拖动目标为button，拖动坐标轴为Y轴，拖动范围为[spacing_,nobleScrollBar.height-button.height-spacing_]，当鼠标悬浮在滚动条之上时，鼠标形状变成手型鼠标。

S3，通过第二子控件获取鼠标的移动参数。

S4，根据鼠标的移动参数，计算滚动条的滚动距离；

S5，根据滚动条的滚动距离，通过第一子控件设定滚动条在Flickable视窗中的位置。

在上述步骤S3-S5中，当通过鼠标上下拖动滚动条时时，会触发MouseArea的mouseYChanged()信号，为了能够拖动Flickable也跟着移动，该信号处理函数中需要对target的contentY值进行重新计算，公式如下：

delta＝button.y-spacing_

distance＝nobleScrollBar.height-button.height–2×spacing_

multiple＝target_.contentHeight-target_.height

target_.contentY＝delta×multiple/distance

当鼠标拖动Flickable进行上下移动时，会触发Flickable的contentYChanged()信号,为了让滚动条跟随移动，需要对滚动条的y值进行重新计算公式如下：

delta＝target_.contentY+headerHeight_

multiple＝nobleScrollBar.height-button.height–2×spacing_

distance＝target_.contentHeight-target_.height

button.y＝delta×multiple/distance+spacing_

需要注意的是，在QML中，Flickable还有两个子控件类型，网格视图(GridView)和列表视图(ListView)，这两个控件都有header和footer属性，如果你的Flickable是GridView或者ListView，并且设置了这两个属性，他们会影响contentY的取值范围，假设header的高为headerHeight，footer的高为footerHeight，那么contentY的取值范围就变为：

[-headerHeight,contentHeight+headerHeight+footerHeight-height]，并且需要将headerHeight和footerHeight作为属性传进nobleScrollBar中，当计算Flickable的contentY时，要采用如下公式：

delta＝button.y-spacing_

distance＝nobleScrollBar.height-button.height-2×spacing_

multiple＝headerHeight_+target_.contentHeight+footerHeight_-target_.height

target_.contentY＝delta×multiple/distance-headerHeight_

当计算button的y值时，需要采用如下公式：

delta＝target_.contentY+headerHeight_

multiple＝nobleScrollBar.height-button.height-2*spacing_

distance＝headerHeight_+target_.contentHeight+footerHeight_-target_.height

button.y＝delta*multiple/distance+spacing_

另外，本公开实施例只是给了一个最基本的高灵活性滚动条实现方案，如果需要做其他的修改，完全可以基于本公开进行添加和修改，例如上述button为Rectangle控件类型，如果觉得Rectangle只能设置纯色，也可以将button设置为Image控件类型，这样就可以根据需求，制作相应的image资源，进行替换即可。

另外，本公开实施例只介绍了垂直方向的滚动条实现方案，对于水平方向的滚动条，需要修改MouseArea中的drag.axis为Drag.XAxis、drag.maximumY改为nobleScrollBar.width-button.width-spacing_。当button左右滑动时，将触发mouseXChanged()信号，在信号中只需要重新计算Flickable的contentX值即可；当左右滑动Flickable时，会触发contentXChanged()信号，在该信号中重新计算button的x值即可。

图3示意性示出了根据本公开的电子设备的框图。

如图3所示，电子设备300包括处理器310、计算机可读存储介质320及显示器330。该电子设备300可以执行上面参考图2描述的方法，以实现高灵活性滚动条。

具体地，处理器310例如可以包括通用微处理器、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))，等等。处理器310还可以包括用于缓存用途的板载存储器。处理器310可以是用于执行参考图2描述的根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

计算机可读存储介质320，例如可以是能够包含、存储、传送、传播或传输指令的任意介质。例如，可读存储介质可以包括但不限于电、磁、光、电磁、红外或半导体系统、装置、器件或传播介质。可读存储介质的具体示例包括：磁存储装置，如磁带或硬盘(HDD)；光存储装置，如光盘(CD-ROM)；存储器，如随机存取存储器(RAM)或闪存；和/或有线/无线通信链路。

计算机可读存储介质320可以包括计算机程序321，该计算机程序321可以包括代码/计算机可执行指令，其在由处理器310执行时使得处理器310执行例如上面结合图1所描述的方法流程及其任何变形。

计算机程序321可被配置为具有例如包括计算机程序模块的计算机程序代码。例如，在示例实施例中，计算机程序321中的代码可以包括一个或多个程序模块，例如包括321A、模块321B、……。应当注意，模块的划分方式和个数并不是固定的，本领域技术人员可以根据实际情况使用合适的程序模块或程序模块组合，当这些程序模块组合被处理器310执行时，使得处理器310可以执行例如上面结合图2所描述的方法流程及其任何变形。

尽管已经参照本公开的特定示例性实施例示出并描述了本公开，但是本领域技术人员应该理解，在不背离所附权利要求及其等同物限定的本公开的精神和范围的情况下，可以对本公开进行形式和细节上的多种改变。因此，本公开的范围不应该限于上述实施例，而是应该不仅由所附权利要求来进行确定，还由所附权利要求的等同物来进行限定。