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

    @


  • Moderators

    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.


  • Moderators

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


  • Moderators

    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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.