Spec-Zone.ru › Qt 5.6

Фокусировка клавиатуры в Qt Quick

При нажатии или отпускании клавиши генерируется событие нажатия клавиши, которое передаётся фокусированному элементу Qt Quick Item. Для упрощения создания переиспользуемых компонентов и решения некоторых задач, специфичных для интерактивных пользовательских интерфейсов, элементы Qt Quick добавляют расширение на основе области действия к традиционной модели фокуса клавиатуры Qt.

Обзор обработки нажатий клавиш

При нажатии или отпускании пользователем клавиши происходит следующее:

  1. Qt получает действие клавиши и генерирует событие нажатия клавиши.
  2. Если активным окном является QQuickWindow, событие нажатия клавиши передаётся ему.
  3. Событие нажатия клавиши передаётся сценой элементу Item с активным фокусом. Если ни один элемент не имеет активного фокуса, событие нажатия клавиши игнорируется.
  4. Если элемент QQuickItem с активным фокусом принимает событие нажатия клавиши, распространение прекращается. В противном случае событие передаётся родительскому элементу Item, пока событие не будет принято или не будет достигнут корневой элемент.

    Если элемент типа Rectangle в следующем примере имеет активный фокус, и нажата клавиша A, событие не будет распространяться дальше. При нажатии клавиши B, событие будет распространяться до корневого элемента и, следовательно, будет проигнорировано.

    Rectangle {
    width: 100; height: 100
    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_A) {
            console.log('Key A was pressed');
            event.accepted = true;
        }
    }
}
  5. Если достигнут корневой элемент Item, событие нажатия клавиши игнорируется, и продолжается обычная обработка нажатий клавиш Qt.

См. также свойство Keys и свойство KeyNavigation.

Опрос активного элемента с фокусом

Можно проверить, имеет ли элемент Item активный фокус, используя свойство Item::activeFocus. Например, здесь у нас есть элемент типа Text, текст которого определяется наличием или отсутствием у него активного фокуса.

    Text {
        text: activeFocus ? "I have active focus!" : "I do not have active focus"
    }

Получение фокуса и области фокуса

Элемент Item запрашивает фокус, установив свойство focus в значение true.

В простых случаях иногда достаточно просто установить свойство focus. Если запустить следующий пример с помощью qmlscene, мы увидим, что элемент типа keyHandler имеет активный фокус, и нажатие клавиш A, B, или C соответственно изменяет текст.

Rectangle {
    color: "lightsteelblue"; width: 240; height: 25
    Text { id: myText }
    Item {
        id: keyHandler
        focus: true
        Keys.onPressed: {
            if (event.key == Qt.Key_A)
                myText.text = 'Key A was pressed'
            else if (event.key == Qt.Key_B)
                myText.text = 'Key B was pressed'
            else if (event.key == Qt.Key_C)
                myText.text = 'Key C was pressed'
        }
    }
}

Однако, если бы вышеупомянутый пример использовался как переиспользуемый или импортированный компонент, простое использование свойства focus больше не является достаточным.

Для демонстрации создадим два экземпляра ранее определённого компонента и установим фокус на первый. Цель состоит в том, чтобы при нажатии клавиш A, B, или C первый из двух компонентов получал событие и реагировал соответствующим образом.

Код, импортирующий и создающий два экземпляра MyWidget:

//Window code that imports MyWidget
Rectangle {
    id: window
    color: "white"; width: 240; height: 150

    Column {
        anchors.centerIn: parent; spacing: 15

        MyWidget {
            focus: true             //set this MyWidget to receive the focus
            color: "lightblue"
        }
        MyWidget {
            color: "palegreen"
        }
    }
}

Код MyWidget:

Rectangle {
    id: widget
    color: "lightsteelblue"; width: 175; height: 25; radius: 10; antialiasing: true
    Text { id: label; anchors.centerIn: parent}
    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_A)
            label.text = 'Key A was pressed'
        else if (event.key == Qt.Key_B)
            label.text = 'Key B was pressed'
        else if (event.key == Qt.Key_C)
            label.text = 'Key C was pressed'
    }
}

Мы хотим, чтобы первый элемент MyWidget имел фокус, поэтому мы устанавливаем его свойство focus в значение true. Однако, запустив код, мы можем подтвердить, что второй виджет получает фокус.

Глядя на код MyWidget и window, проблема очевидна - есть три типа, которые устанавливают свойство focus в значение true. Два элемента MyWidget устанавливают focus в true, и компонент window также устанавливает фокус. В конечном итоге, только один тип может иметь фокус клавиатуры, и система должна определить, какой тип получит фокус. Когда создаётся второй элемент MyWidget, он получает фокус, потому что он последним устанавливает своё свойство focus в значение true.

Эта проблема связана с видимостью. Компонент MyWidget хотел бы получить фокус, но он не может контролировать фокус при импорте или повторном использовании. Аналогично, компонент window не имеет возможности узнать, запрашивают ли его импортированные компоненты фокус.

Для решения этой проблемы QML вводит понятие области фокуса. Для существующих пользователей Qt область фокуса подобна автоматическому прокси-серверу фокуса. Область фокуса создаётся путём объявления типа FocusScope.

В следующем примере к компоненту добавлен тип FocusScope, и показан визуальный результат.

FocusScope {

    //FocusScope needs to bind to visual properties of the Rectangle
    property alias color: rectangle.color
    x: rectangle.x; y: rectangle.y
    width: rectangle.width; height: rectangle.height

    Rectangle {
        id: rectangle
        anchors.centerIn: parent
        color: "lightsteelblue"; width: 175; height: 25; radius: 10; antialiasing: true
        Text { id: label; anchors.centerIn: parent }
        focus: true
        Keys.onPressed: {
            if (event.key == Qt.Key_A)
                label.text = 'Key A was pressed'
            else if (event.key == Qt.Key_B)
                label.text = 'Key B was pressed'
            else if (event.key == Qt.Key_C)
                label.text = 'Key C was pressed'
        }
    }
}

Понятие областей фокуса довольно просто.

  • Внутри каждой области фокуса один объект может иметь свойство Item::focus, установленное в значение true Если у нескольких элементов Item установлено свойство focus, последний тип, установивший focus, получит фокус, а другие будут сброшены, аналогично случаям без областей фокуса.
  • Когда область фокуса получает активный фокус, содержащийся элемент типа с установленным свойством focus (если таковой имеется) также получает активный фокус. Если этот тип также является FocusScope, поведение проксирования продолжается. И область фокуса, и подфокусированный элемент будут иметь установленное свойство activeFocus.

Обратите внимание, что так как тип FocusScope не является визуальным типом, свойства его дочерних элементов должны быть доступны родительскому элементу FocusScope. Стили и макеты будут использовать эти визуальные и стилистические свойства для создания макета. В нашем примере тип Column не может отобразить два виджета должным образом, потому что у FocusScope нет собственных визуальных свойств. Компонент MyWidget напрямую связывается со свойствами rectangle для того, чтобы элемент Column мог создать макет, содержащий дочерние элементы FocusScope.

В данном примере второй компонент статически выбран. Теперь несложно расширить этот компонент, чтобы сделать его нажимаемым, и добавить его в исходное приложение. Мы по-прежнему устанавливаем фокус на один из виджетов по умолчанию. Теперь щелчок по любому MyClickableWidget даёт ему фокус, а другой виджет теряет фокус.

Код, импортирующий и создающий два экземпляра MyClickableWidget:

Rectangle {
    id: window

    color: "white"; width: 240; height: 150

    Column {
        anchors.centerIn: parent; spacing: 15

        MyClickableWidget {
            focus: true             //set this MyWidget to receive the focus
            color: "lightblue"
        }
        MyClickableWidget {
            color: "palegreen"
        }
    }

}

Код MyClickableWidget:

FocusScope {

    id: scope

    //FocusScope needs to bind to visual properties of the children
    property alias color: rectangle.color
    x: rectangle.x; y: rectangle.y
    width: rectangle.width; height: rectangle.height

    Rectangle {
        id: rectangle
        anchors.centerIn: parent
        color: "lightsteelblue"; width: 175; height: 25; radius: 10; antialiasing: true
        Text { id: label; anchors.centerIn: parent }
        focus: true
        Keys.onPressed: {
            if (event.key == Qt.Key_A)
                label.text = 'Key A was pressed'
            else if (event.key == Qt.Key_B)
                label.text = 'Key B was pressed'
            else if (event.key == Qt.Key_C)
                label.text = 'Key C was pressed'
        }
    }
    MouseArea { anchors.fill: parent; onClicked: { scope.focus = true } }
}

Когда QML Item явно отказывается от фокуса (установив свойство focus в значение false при наличии активного фокуса), система автоматически не выбирает другой тип для получения фокуса. То есть возможно, что в данный момент активный фокус отсутствует.

См. Примеры Qt Quick - Взаимодействие с клавиатурой для демонстрации перемещения фокуса клавиатуры между несколькими областями с помощью типов FocusScope.

Расширенное использование областей фокуса

Области фокуса позволяют легко разделить выделение фокуса. Некоторые QML элементы используют это для данной цели.

ListView, например, сама является областью фокуса. Как правило, это незаметно, так как у ListView обычно нет вручную добавленных визуальных дочерних элементов. Будучи областью фокуса, ListView может сфокусировать текущий элемент списка, не беспокоясь о том, как это повлияет на остальную часть приложения. Это позволяет делегату текущего элемента реагировать на нажатия клавиш.

Этот искусственный пример демонстрирует, как это работает. Нажатие клавиши Return выведет имя текущего элемента списка.

Rectangle {
    color: "lightsteelblue"; width: 100; height: 50

    ListView {
        anchors.fill: parent
        focus: true

        model: ListModel {
            ListElement { name: "Bob" }
            ListElement { name: "John" }
            ListElement { name: "Michael" }
        }

        delegate: FocusScope {
                width: childrenRect.width; height: childrenRect.height
                x:childrenRect.x; y: childrenRect.y
                TextInput {
                    focus: true
                    text: name
                    Keys.onReturnPressed: console.log(name)
                }
        }
    }
}

Хотя пример прост, за кулисами происходит много. Всякий раз, когда текущий элемент изменяется, ListView устанавливает свойство Item::focus делегата. Так как ListView является областью фокуса, это не влияет на остальную часть приложения. Однако, если у ListView сам активный фокус, это заставляет сам делегат получить активный фокус. В этом примере корневой тип делегата также является областью фокуса, что, в свою очередь, даёт активный фокус типу Text, который фактически выполняет работу по обработке клавиши Return.

Все QML классы представлений, такие как PathView и GridView, ведут себя аналогично, чтобы позволить обработку нажатий клавиш в их соответствующих делегатах.

© The Qt Company Ltd
Licensed under the GNU Free Documentation License, Version 1.3.
https://doc.qt.io/archives/qt-5.6/qtquick-input-focus.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API