Unable to get the proper orientation for components using states



  • Hi,
    I have created the slider.qml in which i use states to create different orientations of slider
    Here is the code in slider.qml file : @states: [
    State {
    name: "Horizontal"
    when: (orientation == Qt.Horizontal && inverted == false)

            AnchorChanges
            {
                target: zoomOutContainer
                anchors.left: sliderRoot.left
                anchors.right: undefined
                anchors.top: undefined
                anchors.bottom: undefined
            }
            AnchorChanges
            {
                target: zoomInContainer
                anchors.left: undefined
                anchors.right: sliderRoot.right
                anchors.top: undefined
                anchors.bottom: undefined
            }
            AnchorChanges
            {
                target: track
                anchors.left: zoomOutContainer.right
                anchors.right: zoomInContainer.left
                anchors.top: undefined
                anchors.bottom: undefined
                anchors.horizontalCenter: undefined
                anchors.verticalCenter: sliderRoot.verticalCenter
            }
        },
        State {
            name: "Vertical"
            when: (orientation == Qt.Vertical && inverted == false)
    
            AnchorChanges
            {
                target: zoomOutContainer
                anchors.left: undefined
                anchors.right: undefined
                anchors.top: undefined
                anchors.bottom: sliderRoot.bottom
            }
            AnchorChanges
            {
                target: zoomInContainer
                anchors.left: undefined
                anchors.right: undefined
                anchors.top: sliderRoot.top
                anchors.bottom: undefined
            }
            AnchorChanges
            {
                target: track
                anchors.left: undefined
                anchors.right: undefined
                anchors.top: zoomInContainer.bottom
                anchors.bottom: zoomOutContainer.top
                anchors.horizontalCenter: sliderRoot.horizontalCenter
                anchors.verticalCenter: undefined
            }
        }
    ]@
    

    Here is the code in main.qml where I have used the slider as component : @ states: [
    State {
    name: "Potrait"
    when: mainPage.width < mainPage.height
    PropertyChanges {
    target: zoomSlider
    orientation: Qt.Horizontal
    }
    AnchorChanges
    {
    target: zoomSlider
    anchors.bottom: dataArea.bottom
    anchors.right: undefined
    anchors.horizontalCenter: dataArea.horizontalCenter
    anchors.verticalCenter: undefined
    }
    PropertyChanges {
    target: zoomSlider
    anchors.leftMargin: 10
    anchors.rightMargin: 10
    anchors.topMargin: 0
    anchors.bottomMargin: 20
    }
    },
    State {
    name: "Landscape"
    when: mainPage.width > mainPage.height
    PropertyChanges {
    target: zoomSlider
    orientation: Qt.Vertical
    }
    AnchorChanges
    {
    target: zoomSlider
    anchors.bottom: undefined
    anchors.right: dataArea.right
    anchors.horizontalCenter: undefined
    anchors.verticalCenter: dataArea.verticalCenter
    }
    PropertyChanges {
    target: zoomSlider
    anchors.leftMargin: 0
    anchors.rightMargin: 20
    anchors.topMargin: 10
    anchors.bottomMargin: 10
    }
    }
    ]@

    I am unable to get the proper orientation for the "track" when I rotate the screen. However zoomOutContainer and zoominContianer anchors changes do seem to work fine.


Log in to reply
 

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