Политика конфиденциальностиКонтактыО сайтеОтзывы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

Ответы

Только авторизованные пользователи могут отвечать на форуме.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
9 декабря 2018 г. 22:00
Yura Gajdar

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

  • Результат:70баллов,
  • Очки рейтинга1
9 декабря 2018 г. 2:33
anat_home@ukr.net

C++ - Тест 001. Первая программа и типы данных

  • Результат:100баллов,
  • Очки рейтинга10
9 декабря 2018 г. 2:29
anat_home@ukr.net

C++ - Тест 001. Первая программа и типы данных

  • Результат:60баллов,
  • Очки рейтинга-1
Последние комментарии
9 декабря 2018 г. 8:14
Евгений Легоцкой

Вы можете в QSettings записать откуда угодно bool переменную без всяких чекбоксов. def save_check_box_settings(self): settings = QSettings() settings.setValue(SETTINGS_TRAY,...
8 декабря 2018 г. 13:02
Жасулан Нургожинов

а как можно это сделать без чек бокса
5 декабря 2018 г. 13:25
Евгений Легоцкой

Значит всё-таки в переменных окружения была проблема. Полагаю, что Qt Creator берёт информацию сначала из переменных PATH, либо записывает её из  своего конфига, а потом берёт уже из PATH при ...
5 декабря 2018 г. 13:21
IscanderChe

В переменной PATH путь к CMake был указан как G:\soft\CMake\bin, в реальности же каталог называется Cmake. Причём после изменения в переменной PATH всё заработало, а в Qt Creator путь ос...
5 декабря 2018 г. 10:53
Евгений Легоцкой

Под linux как правило проще, там всё по свои каталогам и полочкам разложено сразу. Думается мне, что проблема все-таки где-то в путях переменных...
Сейчас обсуждают на форуме
9 декабря 2018 г. 18:55
Игорь Максимов

Доброго времени суток. Нашел приложение для конвертации видео + celery что очень радует. Не радует только то что оно отказывается работать под python3 Трейсбек прикладываю: File "/ho...
9 декабря 2018 г. 15:14
Евгений Легоцкой

Непонятно, вы драйвер скачали или собирали? Сдаётся мне, что возможно более правильный вариант собрать своим компилятором вначале его, а потом уже подключать.
8 декабря 2018 г. 18:30
Жасулан Нургожинов

может так будет понятнее# -*- coding: utf-8 -*-# Form implementation generated from reading ui file 'C:\Users\hallgato\PycharmProjects\workers.ui'## Created by: PyQt5 UI code generator 5.11...
8 декабря 2018 г. 10:51
Даниил Тетерин

Но если серьезно, то действительно помощь нужна. Мне по-хорошему нужно сдать это в понедельник
Присоединяйтесь к нам в социальных сетях

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