Как в QML сделать переход между состояниями

Добрый день.

Без кода тут даже подсказывать нечего.

import QtQuick 2.4
import QtQuick.Controls 2.2
 
Item {
    id: element
    width: 400
    height: 600
    property alias page1ButtonMenu: page1ButtonMenu
 
    Button {
        id: page1Button0
        x: 66
        y: 172
        width: 128
        height: 128
        //font.capitalization: Font.AllUppercase
        //display: AbstractButton.TextOnly
        //topPadding: 5
        Image {
            id: image
            width: 130
            height: 130
            anchors.topMargin: 0
            anchors.leftMargin: 0
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.fill: parent
            source: "qrc:/images/images/close.png"
            fillMode: Image.Stretch
        }
    }
 
    Button {
        id: page1Button1
        x: 251
        y: 172
        width: 130
        height: 130
        Image {
            id: image1
            width: 130
            height: 130
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.fill: parent
            source: "qrc:/images/images/close.png"
            fillMode: Image.Stretch
        }
    }
 
    Button {
        id: page1ButtonMenu
        x: 150
        y: 479
        text: qsTr("МЕНЮ")
        font.pointSize: 18
    }
 
    Label {
        id: page1labe0
        x: 57
        y: 47
        width: 286
        height: 33
        text: qsTr("Выберете красный цвет")
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 22
        font.family: "Verdana"
        font.weight: Font.Thin
    }
 
    Label {
        id: page1Label1
        x: 122
        y: 358
        width: 156
        height: 56
        text: qsTr("Побед: 0%")
        font.pointSize: 20
        horizontalAlignment: Text.AlignHCenter
    }
    states: [
        State {
            name: "State1"
 
            PropertyChanges {
                target: image
                source: "images/red.png"
            }
 
            PropertyChanges {
                target: image1
                source: "images//black.png"
            }
        },
        State {
            name: "State2"
 
            PropertyChanges {
                target: image
                source: "images//black.png"
            }
 
            PropertyChanges {
                target: image1
                source: "images//red.png"
            }
        }
    ]
}
 

и отсюда еще один вопрос: фактически 3 состояния, а в коде только 2. почему так? как с этим работать?

как я понял нужно сделать третий states и вызвавть так states:имя состояния

Хотя почему то не работает.
В файле main.qml прописал

    Loader
              {
                  id: loader
                  anchors.fill: parent
                  source: "Page1.qml"
                  state: "Page1State1"
              }

но почему то состояние не меняется. Скажите пожалуйста почему так и как исправть.

а если я в описании страницы Page1 прописываю state: "Page1State2", то почему то не загружаются картинки

Извините, с картинками разобрался, но вот как включать нужное состояние из других частей проекта, пока не понятно

Также попробовал прикрепить переход к сигналу кнопки, но переход не работает

    page1Button0.onClicked: {  //left button
        state: "Page1State0"
    }

Вот так заработало

    page1Button0.onClicked: {  //left button
        state = "Page1State2"
    }