QML类型说明-Flickable

Flickable

ImportStatement:   import QtQuick 2.2

Inherits:      Item

InheritedBy:    GridView and ListView.

 

Properties

atXBeginning: bool

atXEnd :bool

atYBeginning: bool

atYEnd :bool

bottomMargin: real

boundsBehavior: enumeration

contentHeight: real

contentItem: Item

contentWidth: real

contentX :real

contentY :real

dragging :bool

draggingHorizontally: bool

draggingVertically: bool

flickDeceleration: real

flickableDirection: enumeration

flicking :bool

flickingHorizontally: bool

flickingVertically: bool

horizontalVelocity: real

interactive: bool

leftMargin :real

maximumFlickVelocity: real

moving :bool

movingHorizontally: bool

movingVertically: bool

originX :real

originY :real

pixelAligned: bool

pressDelay :int

rebound :Transition

rightMargin: real

topMargin :real

verticalVelocity: real

visibleArea

visibleArea.xPosition: real

visibleArea.widthRatio: real

visibleArea.yPosition: real

visibleArea.heightRatio: real

 

Signals

flickEnded()

flickStarted()

movementEnded()

movementStarted()

 

Methods

cancelFlick()

flick(qrealxVelocity, qreal yVelocity)

resizeContent(realwidth, real height, QPointF center)

returnToBounds()

 

DetailedDescription

Flickable组件可在表面放置子组件。它能拖和挥动,以促使试图上的子组件滚动。这个设计是为了实现展示巨大数目的子组件。像ListView和GridView。

在传统的用户界面,试图能用标准控件滚动。诸如卷轴工具和箭头按钮。在一些情形下,按住鼠标按键并拖动鼠标来拖动视图也是可能的。

而在触摸用户界面,拖动行为常常被用户用一霎的行为提供,如用户在触摸屏上滑动,此时滚动将在用户停止触摸屏幕后继续。

Flickable不会自动包夹它的内容。如果不用全屏的子组件,我们应该设置clip属性为真。

下面的例子战士了在一个小视图中放大图片,用户可以拖动或滑动来看图片的不同部分。

QML类型说明-Flickable_第1张图片

 

importQtQuick 2.0

 

Flickable {

    width: 200; height: 200

    contentWidth: image.width; contentHeight:image.height

 

    Image { id: image; source:"bigImage.png" }

}

组件被作为Flickable的子宣布,将自动设置父为Flickable的contentItem。当在Flickable的子上操作时,这需要被考虑。例如附加到Flickable的绑定,对于contentItem.childrenRect是可用的。

 

Limitations

注意:由于实现细节,放置在Flickable中的组件不能被id锚定,使用parent替代。

 

PropertyDocumentation

atXBeginning: bool

flickable视图在X轴的开始位置,则为真。

 

atXEnd :bool

flickable视图在X轴的结束位置,则为真。

 

atYBeginning: bool

flickable视图在Y轴的开始位置,则为真。

 

atYEnd :bool

flickable视图在Y轴的结束位置,则为真。

 

bottomMargin: real

底部尺寸,除了contentWidth和contentHeight外被保留的空间。

 

boundsBehavior: enumeration

表面拖出Flickable的边界或过度的挥出Flickable的边界的处理。这能让边界变得柔软,而不是像硬邦邦的物理边界那样。

它能是下面的值:

Flickable.StopAtBounds-不能拖或挥出边界,在边界停止。

Flickable.DragOverBounds-能拖出边界,但挥不可以。

Flickable.DragAndOvershootBounds(default) -拖和挥都可以超出边界。

注意:挥是指在触摸屏上滑动的动作。

 

contentHeight: real

内容尺寸的高度(表面被Flickable控制)。一般会将它设置成所有子组件在Flickable中的合并尺寸。下面的代码展示了如何用这个属性显示比视图大的图片:

importQtQuick 2.0

 

Flickable {

    width: 200; height: 200

    contentWidth: image.width; contentHeight:image.height

 

    Image { id: image; source:"bigImage.png" }

}

在一些情况下,内容的尺寸能基于contentItem的childrenRect.width和childrenRect.height属性自动设置。例如上面的代码可以重写为:

contentWidth:contentItem.childrenRect.width; contentHeight: contentItem.childrenRect.height

自动设置假设子开始于坐标(0.0)

 

contentItem: Item

包含在Flickable中移动组件的内部组件。在Flickable中宣部的组件会自动关联父到Flickable的contentItem属性上。但动态的创建组件需要显示的指定父。例如:

Flickable {

    id: myFlickable

    function addItem(file) {

        var component =Qt.createComponent(file)

       component.createObject(myFlickable.contentItem);

    }

}

 

contentWidth: real

内容尺寸的宽度(表面被Flickable控制)。一般会将它设置成所有子组件在Flickable中的合并尺寸。下面的代码展示了如何用这个属性显示比视图大的图片:

importQtQuick 2.0

 

Flickable {

    width: 200; height: 200

    contentWidth: image.width; contentHeight:image.height

 

    Image { id: image; source:"bigImage.png" }

}

在一些情况下,内容的尺寸能基于contentItem的childrenRect.width和childrenRect.height属性自动设置。例如上面的代码可以重写为:

contentWidth:contentItem.childrenRect.width; contentHeight: contentItem.childrenRect.height

自动设置假设子开始于坐标(0.0)

 

contentX :real

当前Flickable视图的左上角在表面的X坐标。

 

contentY :real

当前Flickable视图的左上角在表面的Y坐标。

 

dragging :bool

视图是否由于用户拖动,正在水平、垂直或朝任何方向移动。

 

draggingHorizontally: bool

视图是否由于用户拖动,正在水平、垂直或朝任何方向移动。

 

draggingVertically: bool

视图是否由于用户拖动,正在水平、垂直或朝任何方向移动。

 

flickDeceleration: real

挥的减速度,默认值依赖于平台。

 

flickableDirection: enumeration

能挥的方向。

Flickable.AutoFlickDirection(default) -如果contentHeight不等于Flickable的高度,则允许垂直方向,如果contentWidth不等于Flickable的宽度,则允许水平方向。

Flickable.HorizontalFlick-允许水平方向

Flickable.VerticalFlick-允许垂直方向

Flickable.HorizontalAndVerticalFlick-允许水平和垂直方向

 

flicking :bool

视图是否由于用户挥,正在水平、垂直或朝任和方向移动。

 

flickingHorizontally: bool

视图是否由于用户挥,正在水平、垂直或朝任和方向移动。

 

flickingVertically: bool

视图是否由于用户挥,正在水平、垂直或朝任和方向移动。

 

horizontalVelocity: real

沿着x轴和y周的瞬间移动速度,单位像素/秒。报告的速度是平滑的,以避免不稳定的输出。注意当视图有巨大的内容尺寸(是视图尺寸的10倍以上)。在连续挥的情形下,速度可以超过触摸滑过的速度。这允许用户快速通过巨大的内容。

 

interactive: bool

是否允许用户与Flickable交互。如果用户不能在Flickable上拖或挥,就是不交互。默认为真。

这个属性用于暂时关闭交互。这用与用户在子组件上操作。例如,我们可能在用户操作子时,冻结Flickable地图,通过探出的窗口来滚动Flickable。

 

leftMargin :real

左边保留的空间。

 

maximumFlickVelocity: real

用户能挥的最大速度。单位像素/每秒。默认值依赖于平台。

 

moving :bool

视图是否由于用户拖或挥,正在水平、垂直或朝任何方向移动。

 

movingHorizontally: bool

视图是否由于用户拖或挥,正在水平、垂直或朝任何方向移动。

 

movingVertically: bool

视图是否由于用户拖或挥,正在水平、垂直或朝任何方向移动。

 

originX :real

内容的起始的X坐标。它总是反映内容左上角的坐标,不管内容的布局方向是怎样的。它通常是(0,0)。注意ListView和GridView可以有任意的起源,这是由于具像尺寸的变化或插入删除一个可视的单元。

 

originY :real

内容的起始的X坐标。它总是反映内容左上角的坐标,不管内容的布局方向是怎样的。它通常是(0,0)。注意ListView和GridView可以有任意的起源,这是由于具像尺寸的变化或插入删除一个可视的单元。

 

pixelAligned: bool

contentX和contentY对齐到像素(true)或亚像素(false)。

打开pixelAligned能用参照边优化静止移动的内容。参照物诸如一像素宽的线,文本或矢量图。关闭pixelAligned可用于优化动画质量。默认为假。注意这不是让A内容和B内容对齐。

 

pressDelay :int

按动作从Flickable交付给子组件的延迟时间。这是有用的。挥和拖动都起源于鼠标按下或触摸屏触摸。而该行为如果直接交付给子组件,会产生不良影响。因为用户可能只想挥,而不是点击。所以当用户在超时前,将点击变成拖或挥的动作,点击就不会交付给子。如果在超时之前,按钮被释放,那么点击和释放都交付给子组件。

注意对于嵌套的Flickables的pressDelay属性。外层的Flickables的该属性被内层的覆盖。如果拖动超出了平台的阈值,按事件将不管这个属性设置值,直接被发射。

同时参阅QStyleHints。

 

rebound :Transition

这是一个过渡,用于组件实例回到flickable边界内的动画。当拖或挥内容超出flickable的边界或调用returnToBounds()时,这个过渡被触发。

importQtQuick 2.0

 

Flickable {

    width: 150; height: 150

    contentWidth: 300; contentHeight: 300

 

    rebound: Transition {

        NumberAnimation {

            properties: "x,y"

            duration: 1000

            easing.type: Easing.OutBounce

        }

    }

 

    Rectangle {

        width: 300; height: 300

        gradient: Gradient {

            GradientStop { position: 0.0;color: "lightsteelblue" }

            GradientStop { position: 1.0;color: "blue" }

        }

    }

}

当上面的视图被挥出边界,它将用指定的过渡返回到边界内。如果这个属性没有设置,默认过渡被应用。

 

rightMargin: real

右边保留的空间。

 

topMargin :real

顶部保留的空间。

 

verticalVelocity: real

沿着x轴和y周的瞬间移动速度,单位像素/秒。报告的速度是平滑的,以避免不稳定的输出。注意当视图有巨大的内容尺寸(是视图尺寸的10倍以上)。在连续挥的情形下,速度可以超过触摸滑过的速度。这允许用户快速通过巨大的内容。

 

visibleAreagroup

visibleArea.xPosition: real

visibleArea.widthRatio: real

visibleArea.yPosition: real

visibleArea.heightRatio: real

当前视图的位置和尺寸。这一般用于画scrollbar。通常,visibleArea.xPosition和visibleArea.widthRatio成对使用,visibleArea.yPosition和visibleArea.heightRatio成对使用。取值都在0.0到1.0之间。如果我们需要画一个水平的scrollbar,定义高为8像素。scrollbar的宽,就是整个视图的宽度。然后,我们需要在scrollbar中制作个滑块,用于表示当前视图是整个内容范围的哪一页。那么这个滑块的宽和位置如何确定。我们假设整个内容的宽度为100,单个视图的宽度为10。当前视图处于整个内容X轴的开始。那么,我们的滑块就应该在scrollbar的最左方,宽度应该是整个视图尺寸的十分之一。这就是我们需要显示的效果。此时,Flickable的visibleArea.xPosition为0.0,visibleArea.widthRatio的值为0.1。如果我们将视图移动到整个内容的第3页,此时visibleArea.xPosition为0.2,visibleArea.widthRatio的值为0.1。如果我们单个视图的宽度变为20,那么visibleArea.widthRatio的值变为0.2。

通过上面的说明,我们应该了解到visibleArea group就是当前视图相对整个内容,其尺寸的百分比和其位置的百分比。我们可以用这些数据,定义出我们需要设计的滑块的尺寸和位置。这个属性的使用方式如下面的代码:

Rectangle {

    width: 200; height: 200

 

    Flickable {

        id: flickable

        ...

    }

 

    Rectangle {

        id: scrollbar

        anchors.right: flickable.right

        y: flickable.visibleArea.yPosition *flickable.height

        width: 10

        height:flickable.visibleArea.heightRatio * flickable.height

        color: "black"

    }

}

 

SignalDocumentation

flickEnded()

当视图由于挥停止移动时,发射这个信号。

 

flickStarted()

当视图被挥时,发射这个信号。挥开始于鼠标或触摸在运动中释放时。

 

movementEnded()

由于用户交互,视图移动停止,发送这个信号。如果挥是生成的,这个信号将在挥停止发射,如果挥不是生成的,这个信号在用户停止拖发射。例如鼠标或触摸屏释放。

 

movementStarted()

由于用户交互导致视图移动时,发射这个信号。

 

MethodDocumentation

cancelFlick()

取消当前的挥。

 

flick(qrealxVelocity, qreal yVelocity)

用水平速度xVelocity和垂直速度yVelocity挥动内容。速度单位像素/秒

 

resizeContent(realwidth, real height, QPointF center)

用width、height和center改变内容的尺寸。这不是缩放Flickable的内容,紧紧只是重设contentWidth和contentHeight。调整内容尺寸可能导致子组件被定位到Flickable的边界之外,调用returnToBounds()可移动内容返回边界之内。

 

returnToBounds()

确保内容在边界之内。这用与在手动定位内容之后,确保内容在边界内。

你可能感兴趣的:(QML类型说明-F)