Resize rectangle when the main qml view resized
-
hi, i have a problem, because i dont use a qmlcontrol button (why in past versions of qml i can't export this componenent in Windows), i create my custom component, a rectangle and in him, declare a mouse area, and when mouse area onEntered the width and height reduced in two or three, and when is onExited, the rectangle return to original size, the problem is when the area of screen changes, the size of component keeps how the last size, i try with states, but don't work, here is example.@@
@
Item{
width: ((arrayButtons.width/3) -3); height: 31
Rectangle{
width:(parent.width -2); height: 29
color: "gray"
radius: 4
border.color: "#000000"
anchors.horizontalCenter: parent.horizontalCenter
//anchors.verticalCenter: parent.verticalCenter
Text {
text: qsTr("Detalles")
font.pointSize: 10
width: (parent.width - 1) ; height: 28
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}MouseArea { id: detailMouseArea anchors.fill: parent onEntered: { parent.height= 27 parent.width = parent.width -3 } onExited:{ parent.height= 29 parent.width = (parent.width +3) } onClicked: { switchOperationsMenu("DetailOperations.qml",false) switchViewOfDetails(1) } } } }
@
-
Hi,
I think that is because of this
@
width: ((arrayButtons.width/3) -3); height: 31
@
Since Rectangle depends upon its parent which is Item and which inturn depends upon arrayButtons.
Does arrayButtons's width and height change according to Screen changes ? -
arraybuttons size depend from parent a qml main in file,
@
Row{
width: operations.width; height: parent.height/10
anchors.top: titleOperations.bottom
spacing: 2
id: arrayButtons
...
@
this object is parent, the problem, is when click in button (rectangle with mouse area), when resize the window, the element keep the last size, the others elements resized correctly. -
Can you post the complete example, so that we get a better understanding ?
-
[quote author="p3c0" date="1406790046"]Can you post the complete example, so that we get a better understanding ?[/quote]
this is a complete file
@
Rectangle{
width: 400; height: 400Column{ width: parent.width-30; height: (parent.height - ((parent.height/7 )+ 30)) spacing: 4 anchors.horizontalCenter: parent.horizontalCenter Text{ width: parent.width-10; height: 30 horizontalAlignment: Text.AlignHCenter id: tittleLoaderDetailOrTotal font.pointSize: 13 } Item{ width: parent.width -10;height: parent.height/8 Rectangle{ border.color: "black" width: (parent.width-3); height: (parent.height-3) id: fuelPresetButton anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter Text { id: tagFuelPreset text: "V-POWER" font.pointSize: 11 width: parent.width; height: parent.height horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } MouseArea{ id: fuelNameMouseArea anchors.fill: parent onEntered: { parent.height= parent.height -3 parent.width = parent.width -3 } onExited:{ parent.height= parent.height +3 parent.width = parent.width +3 } onClicked: { volumePresetButtonSignal() } } } } Item{ width: parent.width -10;height: parent.height /8 Rectangle{ border.color: "black" width: parent.width - 3; height: parent.height -3 id: typePresetButton anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter Text { id: tagButtonTypePreset text: "Monto" font.pointSize: 11 width: parent.width; height: parent.height horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } MouseArea { id: typePresetMouseArea anchors.fill: parent onEntered: { parent.height= parent.height -3 parent.width = parent.width -3 } onExited:{ parent.height= parent.height +3 parent.width = parent.width +3 } onClicked: { typePresetButtonSignal() } } } } Item{ width: parent.width -10;height: parent.height/8 Rectangle{ border.color: "black" width: parent.width - 3; height: parent.height -3 id: confirmationButton anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter Text { text: "Ok" font.pointSize: 11 width: parent.width; height: parent.height horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } MouseArea { id: confirmationMouseArea anchors.fill: parent onEntered: { parent.height= parent.height-3 parent.width = parent.width -3 } onExited:{ parent.height= parent.height +3 parent.width = parent.width +3 } onClicked: { confirmationPresetButtonSignal() } } } } Item{ width: parent.width -9; height: parent.height /8 Rectangle{ border.color: "black" width: parent.width - 3; height: parent.height -3 radius: 4 id:cancelButton anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter Text { text: "Cancelar" font.pointSize: 11 width: parent.width; height: parent.height horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } MouseArea { id: cancelMouseArea anchors.fill: parent onEntered: { parent.height= parent.height -3 parent.width = parent.width -3 } onExited:{ parent.height= parent.height +3 parent.width = parent.width +3 } onClicked: { cancelationButtonSignal() } } } } }
}
@//forgot the signals, only i know why items clicked not resize
-
AFAIK, what you can do is instead of
@
Rectangle{
width: 400; height: 400
@set it to
@
Rectangle{
anchors.fill: parent
@and then from where you load this QML file, assuming you are using QQuickView
@
view.setResizeMode(QQuickView::SizeRootObjectToView);
view.resize(400,400);
@So here we are actually resizing the view instead of rootItem i.e Rectangle but this needs QQuickView::SizeRootObjectToView as ResizeMode so that the Rectangle resizes to the view size.