I'd like to replace a SwipeView with an Tumbler in QML as I prefer the notion, that there is no first and no last Item.
The problem is, I can't find any other way to get this Tumbler tumble horizontally instead of vertically, but to rotate it by -90° and then rotate the Items back by +90°
This is my code so far, and works as expected:
import QtQuick 2.5
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
Window {
id: root
visible: true
width: 640
height: 480
Row {
id: buttons
spacing: 2
Button {
text: '0'
onClicked: tumbl.currentIndex = 0
}
Button {
text: '1'
onClicked: tumbl.currentIndex = 1
}
Button {
text: '2'
onClicked: tumbl.currentIndex = 2
}
Button {
text: '3'
onClicked: tumbl.currentIndex = 3
}
}
Tumbler {
id: tumbl
rotation: -90 // <---- Rotate there
anchors {
top: buttons.bottom
left: buttons.left
right: buttons.right
bottom: parent.bottom
}
model: 4
delegate: Rectangle {
rotation: 90 // <---- Rotate back
color: 'red'
border.width: 15
Text {
anchors.centerIn: parent
text: index
}
}
visibleItemCount: 1
Component.onCompleted: contentItem.interactive = false
}
}
You can see the two lines, in which I do the rotation marked with a comment.
Does anybody know a way to either produce this circular behavior with a SwipeView or to change the tumble-orientation of the tumbler without this rotation trick?
Related
Is it possible to move the rectangle outside the window? The only thing I came up with is to write custom logic that will resize the top window when moving the rectangle outside the window.
Current behavior (imgur .gif):
Current behavior
Desired behavior (imgur .png):
Desired behavior
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
id: root
width: 300
height: 500
visible: true
flags: Qt.ToolTip | Qt.FramelessWindowHint | Qt.WA_TranslucentBackground
color: "#00000000"
Rectangle {
id: draggable
color: "blue"
x: 100
y: 100
width: 100
height: 100
MouseArea {
anchors.fill: parent
property real lastMouseX: 0
property real lastMouseY: 0
onPressed: {
lastMouseX = mouseX
lastMouseY = mouseY
}
onMouseXChanged: {
draggable.x += (mouseX - lastMouseX)
}
onMouseYChanged: {
draggable.y += (mouseY - lastMouseY)
}
}
}
Rectangle {
color: "blue"
x: 100
y: 300
width: 100
height: 100
// ...
}
}
Windows can be children of other Windows. The Window behavior is still subject to certain platform-dependent behavior, but on a Desktop environment child Windows should still be able to move outside the parent Window. So simply changing your Rectangle to be a Window will give you the desired effect.
Window {
id: root
Window {
id: draggable
...
}
}
I have a toolbar that can be moved (by drag). Depending on the context the content of this toolbar will change, and its size will change accordingly.
My problem is, when the size is changing, the top-left position remains the same and the right border is moving (default and normal behaviour). But I want the top-right position to remain the same and the left border to move instead.
From screen 1 to 2 the toolbar gets smaller, and is shown like the blue rectangle. I want it to be placed like the red rectangle.
How can I achieve this ? Without anchoring on the right of the screen, because the toolbar is movable.
The first thing that comes to mind would be to wrap the toolbar in an Item, and anchor the toolbar to the top right of the item.
import QtQuick 2.8
import QtQuick.Controls 2.3
ApplicationWindow {
id: window
width: 800
height: 800
visible: true
Slider {
id: slider
value: 200
to: 400
}
Item {
x: 600
ToolBar {
id: toolBar
anchors.top: parent.top
anchors.right: parent.right
implicitWidth: slider.value
MouseArea {
anchors.fill: parent
drag.target: toolBar.parent
}
}
}
}
The Item doesn't render anything itself, and has a "zero" size so that the ToolBar is anchored correctly.
Edit: thanks to #GrecKo for coming up with the MouseArea idea. :) This allows you to drag the ToolBar.
A simple solution is to readjust the position of the item when the width changes:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
Window {
visible: true
width: 640
height: 480
Slider {
id: slider
value: 200
to: 400
}
Rectangle {
id: block
color: "red"
width: parseInt(slider.value)
height:50
x: 100
y: 50
readonly property int previousWidth: width
onWidthChanged: {
block.x += previousWidth - width
}
MouseArea {
anchors.fill: parent
drag.target: block
}
}
}
Since onWidthChanged is called before the previousWidth property change, you can easily adjust the x position from previous and new width values.
(Edit: improved my example using #Mitch Slider)
You can do that with Behavior and PropertyAction.
This relies on the feature that you can specify the point in a Behavior when its linked property actually change. You can then add some logic before and after this effective change:
import QtQuick 2.8
import QtQuick.Controls 2.3
ApplicationWindow {
id: window
width: 800
height: 800
visible: true
Slider {
id: slider
value: 200
to: 400
}
Rectangle {
id: rect
width: slider.value
y: 40
height: 40
color: "orange"
Behavior on width {
id: behavior
property real right
SequentialAnimation {
ScriptAction { script: behavior.right = rect.x + rect.width } // the width of the rectangle is the old one
PropertyAction { } // the width of the rectangle changes at this point
ScriptAction { script: rect.x = behavior.right - rect.width } // the width of the rectangle is the new one
}
}
MouseArea {
anchors.fill: parent
drag.target: parent
}
}
}
Update 1
The idea is to be able to change the front and back of CardForm from main.qml because i want to be able to use multiple CardForm instances. I tried to do what they did here but it doesnt work.
Here is the code:
CardForm.qml
import QtQuick 2.0
Flipable {
id: sCard
width: 75
height: 200
property bool flipped: false
property string front: "Front"
property string back: "Back"
property alias callFront : front
property alias callBack : back
front: Rectangle{
id: front
anchors.fill: sCard
border.width: 2
border.color: "black"
radius: 5
Text{
anchors.centerIn: parent
text: sCard.front
}
}
back: Column{
Rectangle{
id: back
anchors.fill: sCard
radius: 5
border.width: 2
border.color: "black"
Text{
anchors.centerIn: parent
text: sCard.front
}
Text{
anchors.centerIn: parent
text: sCard.front
}
}
}
transform: Rotation{
id: flip
origin.x: sCard.width
origin.y: sCard.height/2
axis.x: 0; axis.y: 1; axis.z: 0 // set axis.y to 1 to rotate around y-axis
angle: 0 // the default angle
}
states: State {
name: "back"
PropertyChanges {
target: flip
angle: 180
}
when: sCard.flipped
}
transitions: Transition{
NumberAnimation {
target: flip
property: "angle"
duration: 200
}
}
MouseArea{
anchors.fill: parent
onClicked: sCard.flipped = !sCard.flipped
}
}
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Neuro Seed")
SwipeView {
id: swipeView
anchors.fill: parent
currentIndex: tabBar.currentIndex
Column {
CardForm{
id: test
anchors.centerIn: parent
test.callFront: "Hello World!"
test.callBack: "Bonjour le Monde!
}
}
}
}
Here are the error messages:
SHGetSpecialFolderPath() failed for standard location "Shared Configuration", clsid=0x1c. ()
qrc:/main.qml:17:13: QML CardForm: back is a write-once property
qrc:/main.qml:17:13: QML CardForm: front is a write-once property
qrc:/main.qml:16:9: QML Column: Cannot specify top, bottom, verticalCenter, fill or centerIn anchors for items inside Column. Column will not function.
the c1.getFront() and getBack() were from a C++ class that I made. I changed these to "Hello World!" and "Bonjour le Monde!"
So after many hours of struggling I figured out that to create a property which is accessible by other .qml files you must create a property alias name: id.property. The id must point towards an existing instance of a object in your code and the property of this instance that you wish to be able to change from the outside. So in my case it would be like so:
CardForm.qml
Flipable {
id: sCard
width: 75
height: 200
property bool flipped: false
property alias frontText : front.text
front: Rectangle{
id: front
anchors.fill: sCard
border.width: 2
border.color: "black"
radius: 5
Text{
anchors.centerIn: parent
text: frontText
}
}
}
and in the main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Neuro Seed")
Rectangle {
anchors.fill: parent
CardForm{
id: test
anchors.centerIn: parent
frontText: "Hello World!"
}
}
}
}
The example below illustrates my problem.
I create a small Rectangle at the top left and clicking on it toggles the color between red and green.
Next, I create a StackView and I push a Rectangle to the StackView and bind the color of this second Rectangle to the color of the top-left rectangle
Expected behavior would be that, clicking on the top-left Rectangle would also change the color of the Rectangle on the StackView since the color was binded. Unfortunately, this is not the case.
Note that things work fine when pushing stackRect2 to the stack (see line in comment)
import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
id: mainWindow
visible: true
width: 1280
height: 720
Rectangle {
id: rect
width: 100
height: 100
focus: true
color: toggle? "red":"green"
property var toggle:false;
MouseArea {
anchors.fill: parent
onClicked: rect.toggle = !rect.toggle
}
}
StackView {
id: stack
width: 100
height:100
anchors.left: rect.right
anchors.leftMargin: 10
Component.onCompleted: {
stack.push ({item:stackRect, properties: {color:rect.color}})
//stack.push ({item:stackRect2})
}
}
Component {
id:stackRect
Rectangle {}
}
Component {
id:stackRect2
Rectangle {color:rect.color}
}
}
Apparently, this behavior is expected behavior and is in line with Component::createObject().
Using
stack.push (stackRect, {color:Qt.binding(function() { return rect.color})})
works just fine.
I am creating a ListView with horizontal orientation. The highlight is set to one fixed position of the view so that the list elements scroll through the visible area when I increment/decrement the current Item. Here is my code for the view:
ListView {
anchors.fill: parent
model: ListModel{
ListElement{name:"x"}
ListElement{name:"y"}
ListElement{name:"z"}
}
delegate:
Rectangle {
property int viewW: ListView.view.width
property bool isCurrent: ListView.isCurrentItem
width: ListView.isCurrent? viewW * 0.4 : viewW * 0.3
Text {
anchors.fill: parent
text: name
}
}
orientation: Qt.Horizontal
highlight: Rectangle {color: "transparent"}
preferredHighlightBegin: 0
preferredHighlightEnd: width*0.4
highlightRangeMode: ListView.StrictlyEnforceRange
}
I want the delegate of the current item to have a greater width than all the other elements. However, when the width of all delegates is not identical, the list scrolling animation (e.g. you can see elements moving to next position, instead of just appearing on the new position) does not apply any more.
How can I have a ListView with the current element showing a different width than the rest of the other elements, while still being able to have the scrolling animations?
The currently selected item can be modified by combining the property to modify with the currentIndex/index properties. The former is the property contained in the ListView to indicate the selected item (as you already know). The latter is a property exposed in the delegate to represent the index of the corresponding item in the list. When we have that
ListView.view.currentIndex === index
we are in the currently selected item. Hence, in your delegate, you can write something like this:
width: ListView.view.currentIndex === index ? 60 : 30
Now the selected item will be twice as large as the other items. However the effect is a little bit ugly. I would go for the following one:
scale: ListView.view.currentIndex === index ? 1.5 : 0.5
Here you are saying that "when this item is the selected one it should grow by 50%, otherwise it should shrink by 50%".
The final code for the width could look like this:
import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Controls 1.2
Window {
id: container
width: 300
height: 150
visible: true
ListView {
id: list
anchors.fill: parent
spacing: 5
model: ListModel{
ListElement{name:"a"}
ListElement{name:"b"}
ListElement{name:"c"}
ListElement{name:"d"}
ListElement{name:"e"}
ListElement{name:"f"}
ListElement{name:"g"}
ListElement{name:"h"}
ListElement{name:"i"}
ListElement{name:"j"}
ListElement{name:"k"}
ListElement{name:"l"}
ListElement{name:"x"}
ListElement{name:"y"}
ListElement{name:"z"}
}
delegate:
Rectangle {
width: ListView.view.currentIndex === index ? 60 : 30 // the magnifying/shrinking
color: "steelblue"
height: ListView.view.height
Text {
anchors.centerIn: parent
text: name
font.pixelSize: 20
}
Behavior on width { // added to smooth the resizing
NumberAnimation { duration: 100 }
}
}
orientation: Qt.Horizontal
highlight: Rectangle {color: "transparent"}
preferredHighlightBegin: 0
preferredHighlightEnd: delegate.width
highlightRangeMode: ListView.StrictlyEnforceRange
}
}
And the effect is not that beautiful as said. I would go for the scale property, as follows:
import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Controls 1.2
Window {
id: container
width: 300
height: 150
visible: true
ListView {
id: list
anchors.fill: parent
spacing: 5
model: ListModel{
ListElement{name:"a"}
ListElement{name:"b"}
ListElement{name:"c"}
ListElement{name:"d"}
ListElement{name:"e"}
ListElement{name:"f"}
ListElement{name:"g"}
ListElement{name:"h"}
ListElement{name:"i"}
ListElement{name:"j"}
ListElement{name:"k"}
ListElement{name:"l"}
ListElement{name:"x"}
ListElement{name:"y"}
ListElement{name:"z"}
}
delegate:
Rectangle {
scale: ListView.view.currentIndex === index ? 1.5 : 0.5
color: "transparent"
width: 30
height: ListView.view.height
Text {
anchors.centerIn: parent
text: name
font.pixelSize: 20
}
Behavior on scale { // added to smooth the scaling
NumberAnimation { duration: 100 }
}
}
orientation: Qt.Horizontal
highlight: Rectangle {color: "steelblue"}
preferredHighlightBegin: 0
preferredHighlightEnd: delegate.width
highlightRangeMode: ListView.StrictlyEnforceRange
}
}
Note that the highlight it strictly maintained at the beginning of the list (i.e. at the left side) as required.