listview - 从 QML ListView 获取焦点/activeFocus 状态

Question

我有一个两列布局，左列有一个 ListView。使用左/右键，我可以在应用程序的两个部分之间切换焦点。

左列的事件焦点被委托(delegate)给 ListView，并从那里直接指向它的其中一行。

如何检查 ListView 或其子项之一是否具有焦点？

import QtQuick 1.1

FocusScope {
    width: 960
    height: 540
    id: app
    focus: true

    FocusScope {
        id: leftColumn
        KeyNavigation.right: rightColumn
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.top: parent.top
        width: 250
        focus: true

        Rectangle {
            id: leftBackgroundColor
            anchors.fill: parent
            color: contactsList.activeFocus ? "red" : "#E6E6E6"

            ListView {
                id: contactsList
                interactive: true
                anchors.fill: parent
                focus: true

                delegate: Text {
                    text: name
                    font.bold: activeFocus
                }
                model: ListModel {
                    ListElement { name: "Simon" }
                    ListElement { name: "Mary" }
                    ListElement { name: "Jack" }
                    ListElement { name: "Frank" }
                }

            }
        }
     }


    FocusScope {
        id: rightColumn
        KeyNavigation.left: leftColumn

        anchors.left: leftColumn.right
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        onFocusChanged: console.log("Right focus changed: " + focus + "/" + activeFocus)

        Rectangle {
            id: rightBackgroundColor
            anchors.fill: parent
            focus: true
            color: activeFocus ? "red" : "#b3b3b3"            
        }
    }
}

Answer 1

我想我找到了解决方法:

onActiveFocusChanged: { focusChanged(focus) }

只要事件焦点发生变化，它就会发出 focusChanged 信号。使用它，属性绑定(bind)(如 color: parent.focus ? "red": "#E6E6E6")也能正常工作。

完整测试代码:

import QtQuick 1.1

FocusScope {
    width: 960
    height: 540
    id: app
    focus: true

    FocusScope {
        id: leftColumn
        KeyNavigation.right: rightColumn
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.top: parent.top
        width: 250

        onActiveFocusChanged: { focusChanged(focus) }

        Rectangle {
            id: leftBackgroundColor
            anchors.fill: parent
            color: parent.focus ? "red" : "#E6E6E6"

            ListView {
                id: contactsList
                interactive: true
                anchors.fill: parent
                focus: true

                delegate: Text {
                    text: name
                    font.bold: activeFocus
                }
                model: ListModel {
                    ListElement { name: "Simon" }
                    ListElement { name: "Mary" }
                    ListElement { name: "Jack" }
                    ListElement { name: "Frank" }
                }

            }
        }
     }


    FocusScope {
        id: rightColumn
        focus: true
        KeyNavigation.left: leftColumn

        anchors.left: leftColumn.right
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.top: parent.top

        onActiveFocusChanged: { focusChanged(focus) }

        Rectangle {
            id: rightBackgroundColor
            anchors.fill: parent
            focus: true
            color: activeFocus ? "red" : "#b3b3b3"            
        }
    }
}