I'm using Qt 5.10 and i'm using a SwipeView. I want to change the swipe animation speed, but after reading the docs i could not see how. Is there some workaround to do this?
the reason i was trying to do this was because, don't know why, the swipe transition animation was very slow (see below)
this is my code:
ColumnLayout{
anchors.fill: parent
Item{
id:modulecontainer
Layout.fillHeight: true
Layout.fillWidth: true
SwipeView{
id: moduleview
anchors.fill: parent
interactive: loggedUser.role==User.AdminRole
clip: true
orientation: Qt.Horizontal
Item {
id: firstPage
Loader {
anchors.fill: parent
id:moduleLoader
}
}
Item {
id: secondPage
Rectangle{
anchors.fill: parent
color: "red"
}
}
}
}
}
I solved this issue just taking the code of contentItem implementation from the source code of SwipeView:
....
SwipeView{
id: moduleview
....
contentItem: ListView {
model: moduleview.contentModel
interactive: moduleview.interactive
currentIndex: moduleview.currentIndex
spacing: moduleview.spacing
orientation: moduleview.orientation
snapMode: ListView.SnapOneItem
boundsBehavior: Flickable.StopAtBounds
highlightRangeMode: ListView.StrictlyEnforceRange
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 250
// min:10
maximumFlickVelocity: 4 * (moduleview.orientation ===
Qt.Horizontal ? width : height)
}
}
....
the result:
don't know why this solves the problem, but i'm sharing just in case others face the same problem. If more animation speed is wanted just replace the maximumFlickVelocity factor from 4 to a bigger value
Related
Dynamic loading data into a QML SwipeView loaded asyncronous is autmomatically increment the current index.
Loader{
asynchronous: true
anchors.fill: parent
sourceComponent: ColumnLayout{
//Any content here that can take some time to load
TabBar{
Layout.fillWidth: true
Repeater{
model: swRepeater.model
delegate: TabButton{
text: "Tab button "+index
}
}
}
SwipeView{
// anchors.fill: parent
Layout.fillWidth: true
Layout.fillHeight: true
currentIndex: 0
Repeater{
id: swRepeater
model: 5
delegate: Item{
Label{
anchors.centerIn: parent
text: qsTr("Test "+index)
}
}
}
onCurrentIndexChanged: {
console.debug("Index was modified to ",currentIndex)
}
}
}
}
At the end of the loading data the current item and index will be 4, and not 0 as explected.
Also is displayed the last item from stack.
The same behavior can be se on the TabBar item so the problem looks to came from ListView or Container.
Any suggestion on this behavior?
In Qml GridLayout with Repeater in it firstly creates items with zero x,y coordinates, width and height. After it emits Component.onComleted signal. And then moves items to correct coordinates, then resizes them.
GridLayout {
id: inputPanel
property var tableModel
rowSpacing: 0
columnSpacing: 0
Repeater {
model: inputPanel.tableModel
delegate: KeyButton {
displayedText: model.display
Layout.minimumHeight: tableModel.elementSize.height
Layout.minimumWidth: tableModel.elementSize.width
Layout.maximumHeight: tableModel.elementSize.height
Layout.maximumWidth: tableModel.elementSize.width
Layout.alignment: Qt.AlignCenter
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
Keybutton.qml
Item {
id: keyButton
anchors.margins: 2.5
Rectangle {
anchors.fill: parent
}
}
Is there any way to catch a moment, when KeyButtons already will have correct x, y, width, height. (KeyButton.onXChanged is not best way, because it emits, when Grid Layout's size changes too)
There is QML control ScrollBar , and mouse wheel scrolls the list fast, I need to perform this slower. Which properties can be used for that?
Qt 5.9
this is from an examples (rssnews sample project from Qt kit):
...
ListView {
id: categories
property int itemWidth: 190
width: isPortrait ? parent.width : itemWidth
height: isPortrait ? itemWidth : parent.height
orientation: isPortrait ? ListView.Horizontal : ListView.Vertical
anchors.top: parent.top
model: rssFeeds
delegate: CategoryDelegate { itemSize: categories.itemWidth }
spacing: 3
}
ScrollBar {
id: listScrollBar
orientation: isPortrait ? Qt.Horizontal : Qt.Vertical
height: isPortrait ? 8 : categories.height;
width: isPortrait ? categories.width : 8
scrollArea: categories;
anchors.right: categories.right
}
...
I see this for ScrollView:
/*! \internal */
property alias __wheelAreaScrollSpeed: wheelArea.scrollSpeed
But can't find scrollSpeed property for my case...
I don't think the ScrollBar is what makes the things go wild. It is the Flickable that is the base class of the ListView.
There you have the property: maximumFlickVelocity which is in pixel / second.
Try to set this to an appropriate value.
This will also affect the flicking behavior!
If it is the ScrollBar you might try the property: stepSize - set it to something smaller than 0.1. I don't have Qt5.9 so I can't try it. I don't belive this is the reason though.
In the worst case, layer a MouseArea ontop of the whole thing, that does not accept any buttons, but handles onWheel:
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.NoButton
//onWheel: manage the scrolling yourself, here.
}
Wrapping a MouseArea (like derM mentioned) on top of the ListView was the solution for me. Now the ListView reacts on the mouse wheel.
MouseArea {
anchors.fill: parent
ListView {
id: lv
anchors.fill: parent
delegate: ...
ScrollBar.vertical: ScrollBar {
parent: lv.parent
anchors.top: lv.top
anchors.left: lv.right
anchors.bottom: lv.bottom
}
}
}
Here is my QML code :
Rectangle
{
.....
Rectangle
{
....height and width is smaller than parent
MouseArea
{
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
onEntered:
{
console.log("enter 2")
}
}
}
MouseArea
{
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
onEntered:
{
console.log("enter 1")
}
}
}
Only mouseArea1 takes effect. If I remove mouseArea1 then mouseArea2 takes effect. So I think the mouse event must be handled by mouseArea1 and let it couldn't be passed to mouseArea2.
I search the document to find out which attr can prevent such behavior but nothing found. So how to let the mouseArea1 and mouseArea2 take effect at the same time?
For "composed" mouse events -- clicked, doubleClicked and pressAndHold -- you can achieve this using the propagateComposedEvents property. But that won't work here because hover events are not composed events.
So what you need to do instead is to change the order in which the MouseAreas are evaluated.
One simple trick is to swap the order of the two MouseAreas in the QML source itself. By placing the smaller one after the larger one, the smaller one takes precedence:
Rectangle{
//.....
MouseArea{
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 1")
}
}
Rectangle{
//....height and width is smaller than parent
MouseArea{
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 2")
}
}
}
}
A second method that achieves the same thing is to add a z index to the topmost MouseArea that's greater than the lower one. By default every element has a z index of 0, so just adding z: 1 to the smaller MouseArea will do the trick:
Rectangle{
//.....
Rectangle{
//....height and width is smaller than parent
MouseArea{
z: 1 // <-----------------
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 2")
}
}
}
MouseArea{
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 1")
}
}
}
I have found the solution in the documentation. Take for instance the following QML code:
import QtQuick 2.0
Rectangle {
color: "yellow"
width: 100; height: 100
MouseArea {
anchors.fill: parent
onClicked: console.log("clicked yellow")
}
Rectangle {
color: "blue"
width: 50; height: 50
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: {
console.log("clicked blue")
mouse.accepted = false
}
}
}
}
Here the yellow Rectangle contains a blue Rectangle. The latter is the top-most item in the hierarchy of the visual stacking order; it will visually rendered above the former.
Since the blue Rectangle sets propagateComposedEvents to true, and also sets MouseEvent::accepted to false for all received clicked events, any clicked events it receives are propagated to the MouseArea of the yellow rectangle beneath it.
Clicking on the blue Rectangle will cause the onClicked handler of its child MouseArea to be invoked; the event will then be propagated to the MouseArea of the yellow Rectangle, causing its own onClicked handler to be invoked.
i have a listview, how to change a speed of changing items, tried highlightMoveSpeed(highlightMoveDuration), but that does not working
Is there any way to increase the spped
slider.qml
import QtQuick 1.0
Rectangle {
id: slider
anchors.fill: parent
Component {
id: pageDelegate
Rectangle {
id: page
height: parent.height
Component.onCompleted: page.width = slider.width
Rectangle {
anchors.fill: parent
// anchors.margins: 15
Image{
anchors.top: parent.top
anchors.fill: parent
source: modelData
}
}
}
}
ListView {
id: list_model
anchors.fill: parent
model: modelData
delegate: pageDelegate
orientation: ListView.Horizontal
snapMode: ListView.SnapToItem
spacing: 5
highlightMoveSpeed: 10000000
}
}
You can either use the default highlight and set its speed, e.g.
highlightMoveDuration : 200
highlightMoveVelocity : 1000
or, in case you use your custom highlight, let the highlight component handle the behaviour. E.g.
// Set the highlight delegate. Note we must also set highlightFollowsCurrentItem
// to false so the highlight delegate can control how the highlight is moved.
highlightFollowsCurrentItem: false
highlight: Rectangle {
y: myListView.currentItem.y;
Behavior on y {
SmoothedAnimation {
easing.type: Easing.Linear
duration:200;
maximumEasingTime:300
velocity : 1000
}
}
}
Check the qt highlight example
A note about the other highlight move property: if you want to use highlightMoveDuration instead of highlightMoveVelocity (highlightMoveSpeed in Qt 4), you need to set the latter to -1:
highlightMoveDuration: 1000
highlightMoveVelocity: -1