Resize rectangle when the main qml view resized

aprrmx90

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)
                }
            }
        }
    }

@

p3c0

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 ?

aprrmx90

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.

p3c0

Can you post the complete example, so that we get a better understanding ?

aprrmx90

[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: 400

Column{
    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

p3c0

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.