Need help with button



  • hi

    here I am creating a simple gallery. I programmed next button, it is working fine but I don't know how to deal with back button.
    here is my code
    @
    import Qt 4.7

    Rectangle {
    width: 500
    height: 500

    Rectangle {
        id: container
        width: 500; height: 100
        border.width: 1
    
        states: [
            State {
                name: "runningTrue"
                PropertyChanges { target: anim_right; running: true }
            },
            State {
                name: "runningFalse"
                PropertyChanges { target: anim_right; running: false }
            }
        ]
        state: "runningFalse"
    
        Rectangle {
            id: image1
            width: 100; height: 100
            color: "green"
        }
        Rectangle {
            id: image2
            width: 100; height: 100
            x: 105;
            color: "brown"
        }
        Rectangle {
            id: image3
            width: 100; height: 100
            x: 215
            color: "orange"
        }
        Rectangle {
            id: image4
            width: 100; height: 100
            x: 325
            color: "lightblue"
        }
        Rectangle {
            id: image5
            width: 100; height: 100
            x: 435
            color: "pink"
        }
        Rectangle {
            id: image6
            width: 100; height: 100
            x: 545
            color: "blue"
        }
    }
    
    Rectangle {
        id: nextButton
        width: 100; height: 25
        radius: 2; //border.width: 1
        //anchors.centerIn: parent
        x: 200; y: 200
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#006699" }
            GradientStop { position: 0.3; color: "#00ffff" }
            GradientStop { position: 0.6; color: "#00D6E4" }
            GradientStop { position: 1.0; color: "#006699" }
        }
    
        Text {
            anchors.centerIn: parent
            text: "Next"
            font.pixelSize: 15
        }
    
        MouseArea {
            anchors.fill: parent
            //onClicked: image1.state == "runningFalse" ? image1.state = "runningTrue" : image1.state = "runningFalse"
            onClicked: if(container.state == "runningFalse") {
                            container.state = "runningTrue"
                       }
                       else {
                            container.state = "runningFalse"
                       }
        }
    }
    
    Rectangle {
        id: previousButton
        width: 100; height: 25
        radius: 2; //border.width: 1
        //anchors.centerIn: parent
        x: 90; y: 200
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#006699" }
            GradientStop { position: 0.3; color: "#00ffff" }
            GradientStop { position: 0.6; color: "#00D6E4" }
            GradientStop { position: 1.0; color: "#006699" }
        }
    
        Text {
            anchors.centerIn: parent
            text: "Back"
            font.pixelSize: 15
        }
    
        MouseArea {
            anchors.fill: parent
            onClicked: container.state == "runningFalse" ? container.state = "runningTrue" : container.state = "runningLFalse"
        }
    }
    
    NumberAnimation {
        id: anim_right
        target: container
        properties: "x"
        from: container.x; to: container.x + 100
        duration: 1000
        easing.type: "OutExpo"
        //running: false
    }
    
    NumberAnimation {
        id: anim_left
        target: image1
        properties: "x"
        from: image1.x; to: image1.x - 100
        duration: 1000
        easing.type: "OutExpo"
        //running: false
    }
    

    }

    @



  • Many ways of doing this ... just onClicked() in previousbutton call anim_left.start() ... Take care of other conditons as well ;)


Log in to reply
 

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