I have a ScrollView which contains several draggable rectangles.
When I drag an item outside of that ScrollView, I want it to remain visible, but it gets clipped at the edge of the ScrollView.
I tried playing around with the z values, but it has absolutely no effect. Any idea on what else I could try?
You need to change the rectangles' parent to the parent of ScrollView when the rectangle been dragged.
And if you want the rectangle always stay out of ScrollView after drag, assign a new state after the mouse release instead of when: dragMe.drag.active.
Item{
id: root
width: 500
height: 500
ScrollView {
width: 200
height: 200
Item{
width: 500
height: 500
Rectangle{
id: rect
color: "red"
width: 50
height: 50
MouseArea{
id: dragMe
drag.target: parent
anchors.fill: parent
}
states: State {
when: dragMe.drag.active
ParentChange { target: rect; parent: root }
}
}
}
}
}
Related
Suppose you have a long horizontal content, so you put it in flickable for your user to swipe through. This might be a picture or a graph or something else. When the content is swiped right so that it's left side is hidden, and you pop the page from stack, a stack animation occurs where all the content is moved right. However, the before hidden part of flickable content then slides to the right also and becomes visible until the animation is over. I want to find a way to prevent this.
Here is the picture of a red rectangle lingering, carefully captured at 25 frames per second:
Here is the minimal example code to illustrate the problem:
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
id: window
visible: true
width: 640
height: 480
header: ToolBar {
contentHeight: toolButton.implicitHeight
ToolButton {
id: toolButton
text: "<"
onClicked: {
stackView.pop()
}
}
}
StackView {
id: stackView
initialItem: pageZero
anchors.fill: parent
}
Component {
id: pageZero
Column {
Label {
text: "Page zero"
}
Button {
text: "next"
onClicked: { stackView.push(pageOne) }
}
}
}
Component {
id: pageOne
Flickable {
height: 200
width: 200
contentHeight: 200
contentWidth: 300
Rectangle {
height: 200
width: 300
color: "red"
}
}
}
}
The question is, what handlers should i put to hide the flickable before the animation starts?
Alright, i found how, actually this solution wasn't that hard. (= What i need to do is to have my flickable hidden during the transition, and also shown after the transition has ended, so I add the two lines:
Flickable {
height: 200
width: 200
contentHeight: 200
contentWidth: 300
// watch this next line
StackView.onDeactivating: {rect.visible = false}
StackView.onActivating: {rect.visible = true}
Rectangle {
id: rect
height: 200
width: 300
color: "red"
}
}
I'm currently trying to change the layout of a QML TreeView so that the expand icon (the arrow or triangle you have to click in order to show or hide the children elements).
I tried anchoring the icon to the right of the TreeView, but for some reason it's not working, it remains on the left despite everything. Do you have any hint?
Thanks a lot!
TreeView {
id: treeView
anchors.fill: parent
model: treeModResult
style: TreeViewStyle {
branchDelegate: Rectangle {
width: 15; height: 15
color: "#00000000"
anchors.right: treeView.right
Image {
id: expandArrow
source: styleData.isExpanded ? "qrc:/img/icn_arrow_top.svg" : "qrc:/img/icn_arrow_bottom.svg"
sourceSize.width: parent.width
sourceSize.height: parent.height
}
ColorOverlay {
anchors.fill: expandArrow
source: expandArrow
color: "#293147"
}
}
}
}
Update
This is what I currently have:
This is what I would like to have:
I had the same issue, I came up with the following solution, as anchoring wasn't working for me neither..
style: TreeViewStyle {
branchDelegate: Rectangle{
id: expandIcon
x: control.width - width
control.width represents the width of the treeview.
Let us suppose I have a card made using Rectangle and I want to show buttons on top of it when clicked. I'm calling showMenu() function to do that and for buttons I'm using an ListView with dynamic ListModel. The problem with such is that the button gets added bellow the Rectangle instead of the top of it. The anchor is not updating after appending an item to the model. Here is my code
Item {
width: 120
height: 120
Rectangle {
id: card
width: 50
height: 100
color: "pink"
anchors.bottom: parent.bottom
Item {
id: rec
width: 50
anchors.bottom: parent.top // This anchor is not updating after appending an item to the list.
ListModel {
id: menuListModel
}
Component {
id: delegate
Rectangle {
width: 120
height: 20
color: "blue"
Text {
anchors.fill: parent
anchors.centerIn: parent
text: commandText
}
}
}
ListView {
anchors.fill: parent
model:menuListModel
delegate: delegate
interactive: false
}
}
MouseArea {
anchors.fill: parent
onClicked: menuListModel.append({"commandText" : "Normal Summon"});
}
}
}
This is more or less a duplicate of this question. The Item needs a height. As mentioned in the answer to that question, you can add debug statements to the code when things like this happen. In this situation, you can also add a Rectangle as a child of the Item and make sure that it's visible:
Rectangle {
anchors.fill: parent
color: "transparent"
border.color: "darkorange"
}
If it's not visible, you know that the problem lies with that (parent) item.
I need a horizontal controller consisting of a background and moving thumb-stick. It requires the following behaviours:
Initially centred, the thumb-stick can drag to the left or right within the background bounds.
When the drag is released, the thumb-stick re-centres itself.
If a part of the background is touched, the thumb-stick jumps to the touch.
If the touch is released, the thumb-stick re-centres itself.
If a drag is made following the touch, the thumb-stick will drag from the touched position.
Problems:
On touch, the thumb-stick jumps to the TouchPoint as required. However if a drag immediately follows the touch, the thumb-stick jumps back to the position it was in before the touch, before initiating the drag.
If the thumb-stick is dragged to the right and released, it immediately jumps back to centre as required. If it is dragged to the left boundary, there is a delay before it jumps back to centre.
Running the below code illustrates the controller working and the problems:
import QtQuick 2.0
Item {
id: horizontalController
width: 300
height: 100
Rectangle {
id: controllerBackground
width: (parent.width / 3) * 2
height: parent.height
anchors.centerIn: parent
color: "white"
}
Flickable
{
id: controllerFlick
width: parent.width / 3 * 2
height: parent.height
anchors.centerIn: parent
contentX: width / 4
contentWidth: bounds.width
contentHeight: bounds.height
boundsBehavior: Flickable.StopAtBounds
onMovementEnded: {
contentX = width / 4
}
MultiPointTouchArea{
id: controllerTouchArea
enabled: true
anchors.fill: bounds
touchPoints: TouchPoint {id: controllerTouchPoint }
onPressed: {
controllerFlick.contentX = Math.min(Math.max(controllerBackground.width - controllerTouchPoint.x,0),controllerBackground.width / 2)
}
onReleased: {
controllerFlick.contentX = controllerFlick.width / 4
}
}
Item{
id: bounds
width: controllerFlick.width * 1.5
height: controllerFlick.height
Rectangle {
id: image
width: parent.width / 3
height: parent.height
anchors.centerIn: parent
color: "red"
}
}
}
}
Here's a code snippet with current form of the code
Rectangle
{
id: menu
GridLayout
{
id: layout
columns: 4
rows: 3
Repeater
{
model: ListModel {}
ToolButton {}
}
Rectangle
{
x: -3
y: -33
width: menu.width - 2
height: menu.height + 33
border.color: "red"
border.width: 3
color: "blue"
MouseArea
{
x: mapToItem(menu, -5, -35).x
y: mapToItem(menu, -5, -35).y
width: menu.width
height: menu.height + 35
hoverEnabled: true
preventStealing: true
onEntered:console.log("onEntered")
onExited:console.log("onExited menu mous area")
}
}
}
}
The MouseArea hover event is propagated down to the ToolButtons in the layout. I don't get why. Hence, the onEntered and onExited events do not work as expected, because onExited happen inside the MouseArea when the ToolButtons are 'hovered' and tooltips are shown. In the end I need the MouseArea to be a bit wider and longer than its parent Rectangle so that once onExited is emitted the menu gets invisible. After the test with Rectangle is successfull it will make sense to make C++ type Polygon.
In your example, onExited must emits when entering ToolButton. According to MouseArea.exited():
Rectangle {
width: 400; height: 400
MouseArea {
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
}
MouseArea {
id: mouseArea2
width: 100; height: 100
anchors.centerIn: parent
hoverEnabled: true
}
}
Moving the mouse into mouseArea2 from mouseArea1 will cause mouseArea1 to emit the exited signal.
If you do not want the exited signal to be emitted,
If instead you give the two MouseAreas a parent-child relationship, moving the mouse into mouseArea2 from mouseArea1 will not cause mouseArea1 to emit exited. Instead, they will both be considered to be simultaneously hovered.
That is, place ToolButton (and all related components) within the MouseArea. For example,
Rectangle {
id: menu
Rectangle {
//some properties
MouseArea {
hoverEnabled: true
//some properties
onEntered:console.log("onEntered")
onExited:console.log("onExited menu mous area")
GridLayout {
id: layout
Repeater {
ToolButton {}
}
}
}
}
}