add focus navigation to qml

This commit is contained in:
Cyril Anisimov 2024-09-19 20:27:48 +02:00
parent cecee3769e
commit 01e31b4b4d
23 changed files with 103 additions and 196 deletions

View file

@ -10,16 +10,6 @@ FocusScope {
property string backButtonImage: "qrc:/images/controls/arrow-left.svg"
property var backButtonFunction
// property bool isFocusable: true
// Keys.onTabPressed: {
// FocusController.nextKeyTabItem()
// }
// Keys.onBacktabPressed: {
// FocusController.previousKeyTabItem()
// }
implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
@ -39,8 +29,6 @@ FocusScope {
implicitWidth: 40
implicitHeight: 40
// focus: true
onClicked: {
if (backButtonFunction && typeof backButtonFunction === "function") {
backButtonFunction()

View file

@ -67,7 +67,6 @@ Button {
focusPolicy: Qt.TabFocus
onFocusChanged: {
console.debug("===>> BUTTON: active.focus: ", root.activeFocus, " parentFlickable: ", root.parentFlickable )
if (root.activeFocus) {
if (root.parentFlickable) {
root.parentFlickable.ensureVisible(this)

View file

@ -27,6 +27,8 @@ Button {
property alias focusItem: rightImage
property FlickableType parentFlickable
hoverEnabled: true
background: Rectangle {
@ -42,6 +44,22 @@ Button {
}
}
function ensureVisible(item) {
if (item.activeFocus) {
if (root.parentFlickable) {
root.parentFlickable.ensureVisible(root)
}
}
}
onFocusChanged: {
ensureVisible(root)
}
focusItem.onFocusChanged: {
root.ensureVisible(focusItem)
}
contentItem: Item {
anchors.left: parent.left
anchors.right: parent.right

View file

@ -31,9 +31,8 @@ Item {
// Set a timer to set focus after a short delay
Timer {
id: timer
interval: 1000 // Milliseconds // TODO: return to 500
interval: 500 // Milliseconds
onTriggered: {
console.debug("===>> Page creation completed")
FocusController.resetFocus()
}
repeat: false // Stop the timer after one trigger

View file

@ -28,11 +28,11 @@ Popup {
}
onOpened: {
FocusController.setRoot(root)
FocusController.setRootItem(root)
}
onClosed: {
FocusController.setRoot(null)
FocusController.setRootItem(null)
}
background: Rectangle {

View file

@ -40,6 +40,7 @@ Item {
implicitHeight: content.implicitHeight
property FlickableType parentFlickable
Connections {
target: textField
function onFocusChanged() {
@ -84,7 +85,7 @@ Item {
TextField {
id: textField
// activeFocusOnTab: false
property bool isFocusable: true
Keys.onTabPressed: {