Политика конфиденциальностиКонтактыО сайтеОтзывыGitHubDonate
© EVILEG 2015-2018
Рекомендует хостинг
TIMEWEB
18 июня 2018 г. 8:03

Qml and JavaScript

Разбираю пример по поводу разницы между qml и javascript

Text {
id: label
x: 24; y: 24
// custom counter property for space presses
property int spacePresses: 0
text: "Space pressed: " + spacePresses + " times"
// (1) handler for text changes
onTextChanged: console.log("text changed to:", text)
// need focus to receive key events
focus: true
// (2) handler with some JS
Keys.onSpacePressed: {
increment()
}
// clear the text on escape
Keys.onEscapePressed: {
label.text = ''
}
// (3) a JS function
function increment() {
spacePresses = spacePresses + 1
}
}


The difference between the QML : (binding) and the JavaScript = (assignment) is, that the binding is a
contract and keeps true over the lifetime of the binding, whereas the JavaScript assignment (=) is a one time value
assignment. The lifetime of a binding ends, when a new binding is set to the property or even when a JavaScript
value is assigned is to the property. For example a key handler setting the text property to an empty string would
destroy our increment display:

Keys.onEscapePressed: {
label.text = ''
}
В принципе понятно, что командой
label.text = ''
мы уничтожили биндинг для label. Но когда я немного подправил

Keys.onEscapePressed: {
label.text = "Space pressed: " + spacePresses + " times"
}
- то есть по сути по ESC я присваиваю полю label - то же самое что и было в text. Однако я не получил того же самого результата. У меня на экране инкремент отображается только по нажатию ESC. То есть биндинг повесился на метод, а не на объект.  Можете пояснить почему?



6

и как мне тогда через JS переинициализировать объект в том же виде?

1

Можно через states сделать.


    Text {
        id: label
        x: 24; y: 24
        // custom counter property for space presses
        property int spacePresses: 0
        text: "Space pressed: " + spacePresses + " times"
        // (1) handler for text changes
        onTextChanged: console.log("text changed to:", text)
        // need focus to receive key events
        focus: true
        // (2) handler with some JS
        Keys.onSpacePressed: {
        increment()
        }

        states: [
            State {
                name: "onEsc"
                PropertyChanges {
                    target: label
                    text: ""
                }
            },
            State {
                name: "onReleased"
                PropertyChanges {
                    target: label
                    text: "Space pressed: " + spacePresses + " times"
                }
            }
        ]

        // clear the text on escape
        Keys.onEscapePressed: {
            state = "onEsc"
        }

        Keys.onReleased: {
            state = "onReleased"
        }

        // (3) a JS function
        function increment() {
        spacePresses = spacePresses + 1
        }
    }
1

По идее, я так думаю, в раздел State{} можно прописать when, к которому привязать кнопки, но я не нашёл, как это правильно сделать.

1

Да тут главное принцип понятен. Спасибо. Я теперь понял почему во всех примерах применяют именно state - PropertyChanges .

1

Опять же, ни кто не мешает всё это проделывать непосредственно в JS в Keys.onReleased и Keys.onEscapePressed, но, на сколько я понимаю, чем меньше JS в QML коде, тем лучше. Меньше проблем при отладке большого кол-ва кода возникает. Да и Qt Creator легче ошибки отлавливает.

1
В том то и дело что просто в JS так нельзя

Если использовать state -

onReleased - не нужен

вот так все работает


   Text {
                id: label
                x: 24; y: 24
                // custom counter property for space presses
                property int spacePresses: 0
                text: "Space pressed: " + spacePresses + " times"
                // (1) handler for text changes
                onTextChanged: console.log("text changed to:", text)
                // need focus to receive key events
                focus: true
                // (2) handler with some JS
                Keys.onSpacePressed: {
                increment()
                }

                states: [
                    State {
                        name: "onEsc"
                        PropertyChanges {
                            target: label
                            text: "Space pressed: " + spacePresses + " times"
                        }
                    }
                ]

                // clear the text on escape
                Keys.onEscapePressed: {
                    state = "onEsc"
                }

                // (3) a JS function
                function increment() {
                spacePresses = spacePresses + 1
                }
            }
Я так понимаю что в этом случае биндинг не слетает

1

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
КА
19 февраля 2019 г. 18:32
Кристина Афанасьева

C++ - Тест 006. Перечисления

  • Результат:70баллов,
  • Очки рейтинга1
КА
19 февраля 2019 г. 18:26
Кристина Афанасьева

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:60баллов,
  • Очки рейтинга-1
КА
19 февраля 2019 г. 18:00
Кристина Афанасьева

C++ - Тест 002. Константы

  • Результат:50баллов,
  • Очки рейтинга-4
Последние комментарии
21 февраля 2019 г. 12:51
Евгений Легоцкой

Иногда CMake приходится перезапускать начисто, не обновляет кэш
R
21 февраля 2019 г. 12:29
RandyGallup

Я указал данные строки, т.к. без них у меня вылетала следующая ошибка: By not providing "FindQt5Core.cmake" in CMAKE_MODULE_PATH this project has asked CMake to find a package configurat...
21 февраля 2019 г. 12:08
BlinCT

Вот атк выглядит мой проектник, посмотрите его. cmake_minimum_required(VERSION 3.6)project(projecttimer)set(CMAKE_CXX_STANDARD 11)set(CMAKE_AUTOMOC ON)set(CMAKE_AUTORCC ON)find_packa...
21 февраля 2019 г. 12:04
BlinCT

Смотрите, если вы используете глобально для проекта -DCMAKE_PREFIX_PATH= то вам не надо уже указывать вот эти строкиset(Qt5Core_DIR "C:/Qt/5.12.1/mingw73_64/lib/cmake/Qt5Core")set(Qt5Gui_DIR...
R
21 февраля 2019 г. 11:54
RandyGallup

Даже не запускается. main.cpp у меня точно такой же, как в статье. CMakeLists.txt пришлось немного подправить (прикрепил ниже), т.к. не находились некоторые файлы. cmake_minimum_requi...
Сейчас обсуждают на форуме
21 февраля 2019 г. 8:58
Евгений Легоцкой

Ну у меня координаты передавались в зависимости от положения курсора мыши, а в вам по сути нужно будет аналогичным способом посылать даннные из полей ввода. Так что здесь скорее интерфес...
20 февраля 2019 г. 21:55
Евгений Легоцкой

Не до конца понимаю сути вопроса, наверное, нужно увидеть программный код и попытку его применения, но к методам базового класса можно обращаться в наследованном классе через вызов по имени ба...
MU
20 февраля 2019 г. 15:06
Maciej Urmański

Yes, ok I have solution! Thank you for directing me about annotate.:) Solution is: users_in = User.objects.filter(joined_users__goal=goal, joined_users__joined=True)
20 февраля 2019 г. 14:40
Евгений Легоцкой

Думаю, что ещё можно переопределить mouseReleaseEvent(QMouseEvent* event) у QTableView, который содержит модель и немного поиграться с индексом. Если это индекс, который соответству...
20 февраля 2019 г. 10:34
Евгений Легоцкой

Да, так тоже можно. Единственный момент в том, что lupdate не всегда понимает, к какому контексту это дело относится, и может запихать в левый контекст. В небольшом проекте это не критич...
Присоединяйтесь к нам в социальных сетях

Для зарегистрированных пользователей на сайте присутствует минимальное количество рекламы