Вопрос - Ответ для новичков по Qt - C++ Qt - Ответ 3342952

// Прямоугольник
Rectangle {
    id: main        // Имя прямоугольника для qml
    width: 200      // Ширина прямоугольника
    height: 100     // Высота прямоугольника
 
    radius: 10      // Радиус углов прямоугольника
    smooth: true    // Заглаживает края
 
    x: -180         // Положение прямоугольника на форме
    color: "red"   // Цвет прямоугольника
 
    // Обработка событий мыши
    MouseArea {
        anchors.fill: parent            // Родитель
        onClicked: console.log("console")   // Срабатывает при клике
    }
}

// Прямоугольник
Rectangle {
    id: main        // Имя прямоугольника для qml
    width: 200      // Ширина прямоугольника
    height: 100     // Высота прямоугольника
 
    radius: 10      // Радиус углов прямоугольника
    smooth: true    // Заглаживает края
 
    state: "normal"
 
    states: [
        State {
            name: "normal"
            PropertyChanges {target: main; x: -180; /* положение прямоугольника */ color: "red" /* цвет прямоугольника */}
        },
        State {
            name: "shift"
            PropertyChanges {target: main; x: 180; /* положение прямоугольника */ color: "green" /* цвет прямоугольника */}
        }
    ]
 
    // Обработка событий мыши
    MouseArea {
        anchors.fill: parent            // Родитель
        // Срабатывает при клике
        onClicked:
        {
            // Изменения позиции формы при клике
            if(main.state == "normal")
                main.state = "shift"
            else
                main.state = "normal"
        }
    }
}

    transitions: Transition {
        PropertyAnimation { properties: "x"; duration: 500; /* Время выполнения */ easing.type: Easing.InOutSine /* Эффект */}
        PropertyAnimation { properties: "color"; duration: 500; /* Время выполнения */ easing.type: Easing.InOutSine /* Эффект */}
    }

    Behavior on x { PropertyAnimation {duration: 500; /* Время выполнения */ easing.type: Easing.InOutBack /* Эффект */} }
    Behavior on color { PropertyAnimation {duration: 500; /* Время выполнения */ easing.type: Easing.InOutBack /* Эффект */} }

    // Обработка событий мыши
    MouseArea {
        anchors.fill: parent            // Родитель
        // Срабатывает при клике
        onClicked:
        {
            // Первый и вторй вариат работают
            // Изменения позиции формы при клике
            if(main.state == "normal")
                main.state = "shift"
            else
                main.state = "normal"
 
            // Работает только вторй вариант
            // Изменения позиции формы при клике
            if(main.x == -180)
            {
                main.color = "green"
                main.x = 180
            }
            else
            {
                main.color = "red"
                main.x = -180
            }
 
        }
    }