Solved QML Anchor Left issues, can't figure out why it's not
-
I have 2 rectangles. 1 blue and 1 pink, if I change the parent on the blue box, I want to the pink box to change position to the left. If I change the parent back, I want to reposition the pink box behind the blue box.
Here it the source code...
import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.0 import QtQuick.Window 2.2 ApplicationWindow { visible: true width: 640 height: 480 title: qsTr("Hello World") color: "gray" Window { width: 100; height: 100; visible: false; title: "wow!" id: wnd Rectangle { id: greenRect anchors.fill: parent MouseArea { anchors.fill: parent onClicked: { blueRect.state = "docked" blueRect.color = "green" } } } // @disable-check M16 onClosing: { blueRect.state = "docked" } } Item { // width: 200; height: 100 x: 10; y: 10; Rectangle { id: redRect anchors.fill: blueRect } Rectangle { id: blueRect width: 50; height: 50 color: "blue" anchors.left: parent.left states: [ State { name: "undocked" ParentChange { target: blueRect; parent: greenRect; } }, State { name: "docked" ParentChange { target: blueRect; parent: redRect; } } ] MouseArea { anchors.fill: parent; onClicked: { blueRect.state = "undocked" wnd.visible = true } } } Rectangle { id: pinkRect color: "pink" width: 50 height: 50 anchors.left: redRect.right } } }
Any help would be appreciated.
Thanks.
-
hi,
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
color: "gray"Window { width: 100; height: 100; visible: false; title: "wow!" id: wnd Rectangle { id: greenRect anchors.fill: parent MouseArea { anchors.fill: parent onClicked: { blueRect.state = "docked" blueRect.color = "green" } } } // @disable-check M16 onClosing: { blueRect.state = "docked" } }
Row{
Rectangle{
id:redRectwidth: 50; height: 50 visible: blueRect.state=="docked" color: "red" } Rectangle { id: blueRect width: 50; height: 50 color: "blue" states: [ State { name: "undocked" ParentChange { target: blueRect; parent: greenRect; } }, State { name: "docked" ParentChange { target: blueRect; parent: redRect; } } ] MouseArea { anchors.fill: parent; onClicked: { blueRect.state = "undocked" wnd.visible = true } } } Rectangle { id: pinkRect color: "pink" width: 50 height: 50 }
}
}
-
import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.0 import QtQuick.Window 2.2 ApplicationWindow { visible: true width: 600 height: 200 title: qsTr("Hello World") color: "gray" id: root Window { width: 600; height: 100; visible: false; title: "wow!" id: wnd Row { id: greenRect anchors.fill: parent spacing: 5 onChildrenChanged: wnd.visible=true } } Row{ id:back spacing: 5 Repeater{ model : 8 Rectangle{ height: 60;width: 60 color: "red" Text{ text:index } MouseArea{ anchors.fill: parent onClicked: parent.parent === greenRect ? parent.parent = back : parent.parent = greenRect } } } } }
-
@LeLev This is perfect, I had no idea that "visible" had an effect on the layout. I am very much still learning... Thanks.
-
@LeLev Your second example is pretty amazing also.
http://www.eatoncode.com/resources/shareit/Screencast_19-38_05-01-2018.mp4
-
@EatonCode ;)