提供一个较小的视窗,显示一个较大的内容,内容可在这个小视窗中进行拖动. Flickable width: height: 指明可供浏览的视窗大小 contentWidth: contentHeight: 指明了内容的大小
由于一个实现的细节,放置在Flickable里面的项不能用id来anchor,而用parent代替 Flickable提供一个较小的视窗来显示一个较大的内容给用户,并且用户可以对改内容进行拖拽和轻拂。
contentX : real contentY : real 这个属性返回内容被轻拂时,x,y方向(相对视窗左上角那个点)的位移。 例如,如果你把图片垂直挪动100像素点,则contentY的值将变为100
flicking : bool flickingHorizontally : bool flickingVertically : bool 这三个为只读属性,返回当前视窗下,内容是否被轻拂(轻弹),如果有,flicking返回true, 如果是沿竖直方向对内容操作,则 flickingVertically 返回true, flickingHorizontally 返回false 如果是沿水平方向对内容操作,则 flickingHorizontally 返回true, flickingVertically 返回false
horizontalVelocity : real verticalVelocity : real
这两个是只读属性,放回当前视窗下,内容被轻拂(轻弹)时,x,y方向的速度,单位是秒每像素点
maximumFlickVelocity : real 这个属性可以限定当前视窗下,内容被轻拂的最大速度,由实现平台限定默认值
moving : bool movingHorizontally : bool movingVertically : bool 这三个为只读属性,返回当前视窗下,内容是否被拖动,如果有, moving 返回true, 如果是沿竖直方向对内容操作,则 movingVertically 返回true, movingHorizontally 返回false 如果是沿水平方向对内容操作,则 movingHorizontally 返回true, movingVertically 返回false
用来做滚动条的 visibleArea.heightRatio : real visibleArea.widthRatio : real visibleArea.xPosition : real visibleArea.yPosition : real 这四个为只读属性 这些属性描述的是当前视窗下,内容的区域的位置和大小 visibleArea.heightRatio = height / contenHeight 比例 visibleArea.widthRatio = width / contentWidth 比例 visibleArea.xPosition = visibleArea.yPosition =
还是看个实例吧
[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
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" } }atXBeginning : bool atXEnd : bool atYBeginning : bool atYEnd : bool 这些属性都为真,如果视窗的内容刚好与视窗大小相符 These PRoperties are true if the flickable view is positioned at the beginning, or end respecively.
flickDeceleration : real 让轻拂或拖动的速率减慢
flickableDirection : enumeration 这个属性决定当前视窗的内容可以被操作的方向 This property determines which directions the view can be flicked.
Flickable.AutoFlickDirection (default) - 自动确定 Flickable.HorizontalFlick - 只允许水平操作 Flickable.VerticalFlick - 只允许垂直操作 Flickable.HorizontalAndVerticalFlick - 运行水平和垂直方向的操作
pressDelay : int
这个属性设置一个毫秒来延迟一个按钮到达视窗内的子项 This property holds the time to delay (ms) delivering a press to children of the Flickable. 这可能是有用的,反应前的新闻一闪的行动有着不良的影响。 This can be useful where reacting to a press before a flicking action has undesirable effects. 这可能是有用的,因为在响应一个按钮之前,一个轻拂动作会导致不良的效果
interactive : bool 这个属性描述用户能否与当前视窗进行交互。当视窗不能进行交互(属性值为false),用户不能拖或者轻弹视窗内容 通常,这个属性的值为真
boundsBehavior : enumeration 这个属性记录了当前视窗内容的大小超过了视窗的边界还是轻拂时越过视窗边界。 这使得边界实现羽化和柔和 boundsBehavior 可能是下面其中一个
Flickable.StopAtBounds - 内容不能被拖出视窗边界,轻拂时内容也不会超出视窗边界 Flickable.DragOverBounds - 内容能被拖出视窗边界,轻拂时内容也不会超出视窗边界 Flickable.DragAndOvershootBounds (default) - 内容能被拖出视窗边界,轻拂时内容会超出视窗边界
contentItem : Item
交互项被包含进视窗,能被操作移动 交互项被声明为视窗的子,被自动添加到视窗的contentItem属性中去
Items created dynamically need to be explicitly parented to the contentItem:
[Javascript] view plain copy 在CODE上查看代码片派生到我的代码片
Flickable { id: myFlickable function addItem(file) { var component = Qt.createComponent(file) component.createObject(myFlickable.contentItem); } }onFlickEnded 当视窗内容被轻拂后停止,触发 This handler is called when the view stops moving due to a flick.
onFlickStarted 当视窗内容刚被被轻拂时,触发
This handler is called when the view is flicked.
A flick starts from the point that the mouse or touch is released, while still in motion. onFlickStarted
onMovementEnded 当视窗内容停止移动时,触发 This handler is called when the view stops moving due to user interaction. 如果是轻拂,则这个信号处理器将在 轻拂之后停止滑动 被触发 If a flick was generated, this handler will be triggered once the flick stops. 如果不是轻拂,当用户停止拖拽时被触发 If a flick was not generated, the handler will be triggered when the user stops dragging - i.e. a mouse or touch release.
onMovementStarted 视窗内容刚被操作时触发 This handler is called when the view begins moving due to user interaction.
This documentation is under development and is subject to change.
Flickable::resizeContent ( real width, real height, QPointF center ) 用于重置视窗内容尺寸
重置视窗内容尺寸会导致内容超过视窗的边界,使用returnToBounds() 函数可以修复内容的边界到一个合法的范围
Flickable::returnToBounds () 使用returnToBounds() 函数可以修复内容的边界到一个合法的范围
新闻热点
疑难解答