Есть ли способ в QML изменить цвет кнопок на нескольких событиях?

Question

Я новичок в Qml и немного растерялся. Я хочу установить несколько состояний для изображения или цвет кнопки. Одна более простая часть заключается в том, что если кнопка нажата, она должна изменить цвет или изображение. Это может быть достигнуто следующим образом:

Button {
    width: 50
    height: 50

    background: Rectangle {
        color: parent.pressed ? "red" : "blue"
    }
}

В дополнении у меня также есть состояния: нажал, включен, включен нажал и многое другое.

Итак, во-первых: можно ли просто поймать parent.pressed без оператора else, что-то вроде:

if (parent.pressed)
    color = "red"
elseif (onClicked)
    color = "blue"
....

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

Таким образом, в основном у меня есть две проблемы: как перехватить событие в операторе if и как перехватить несколько событий, и не использовать этот оператор if else как:

 parent.pressed ? "red" : "blue"

Я получил еще , можно добавлять состояния.

Button {
width: 50
height: 50
id: btn
onClicked: state="clicked"
onPressed: state="pressed"

background: Rectangle
{
    anchors.fill: parent
}

states: [
    State {
        name: "clicked"
        PropertyChanges { target: btn; background: color= "red" }
    },
    State {
        name: "pressed"
        PropertyChanges { target: btn; background: color= "blue" }
    }
]

}

Но это не изменит цвет моей кнопки, а остальной части пользовательского интерфейса.

Answer 1

Я полагаю, в вашем коде есть синтаксическая ошибка. На самом деле это должно быть что-то вроде следующего:

Button {
    id: btn
    text: "Click me"
    property color bgColor
    anchors.centerIn: parent
    state: pressed ? "pressed" : "regular"
    background: Rectangle {
        color: btn.bgColor
    }

    states: [
        State {
            name: "regular"
            PropertyChanges {
                target: btn
                bgColor: "orange"

            }
        },
        State {
            name: "pressed"
            PropertyChanges {
                target: btn
                bgColor: "green"
            }
        }
    ]
}

или вы можете играть с Rectangle:

background: Rectangle {
    id: bg        
}

states: [
    State {
        name: "regular"
        PropertyChanges {
            target: bg
            color: "orange"

        }
    },
    State {
        name: "pressed"
        PropertyChanges {
            target: bg
            color: "green"
        }
    }
]