Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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