QML 用 Ja​​vaScript 定义焦点链序列

Question

我想以某种方式在 QML 中定义自定义焦点链，即有一个 JavaScript 函数决定下一个获得焦点的元素。焦点链由数组定义。代码如下：

import QtQuick 2.12

import QtQuick.Window 2.12

import QtQuick.Controls 2.5

Window {

    width: 640

    height: 480    

    visible: true

    title: qsTr("Focus sandbox")

    Grid {

        width: 100; height: 100

        columns: 2

        property variant ids: [topLeft,topRight,bottomLeft,bottomRight]

        property variant currentId: 0

        function testFocusDispatcher()

        {

            console.log("Current id: "+currentId)

            if(currentId<3)

            {

                currentId++;

            }

            else

            {

                currentId=0;

            }

            return ids[currentId];

        }

        Rectangle {

            id: topLeft

            width: 50; height: 50

            color: focus ? "red" : "lightgray"

            focus: true

            KeyNavigation.tab: parent.testFocusDispatcher();

        }

        Rectangle {

            id: topRight

            width: 50; height: 50

            color: focus ? "red" : "lightgray"

            KeyNavigation.tab: parent.testFocusDispatcher();

        }

        Rectangle {

            id: bottomLeft

            width: 50; height: 50

            color: focus ? "red" : "lightgray"

            KeyNavigation.tab: parent.testFocusDispatcher();

        }

        Rectangle {

            id: bottomRight

            width: 50; height: 50

            color: focus ? "red" : "lightgray"

            KeyNavigation.tab: parent.testFocusDispatcher();

        }

    }

}

我收到很多这样的消息：

QML KeyNavigation: Binding loop detected for property "tab"

从输出中可以看出，此函数对每个元素运行了不止一次。我究竟做错了什么？

Answer 1

这是由于绑定引起的。每次执行“testFocusDispatcher”时，“currentId”都会改变，这将导致绑定重新评估，从而导致“testFocusDispatcher”执行等......你看到了问题！相反，我会做这样的事情：import QtQuick 2.12import QtQuick.Window 2.12import QtQuick.Controls 2.5Window {&nbsp; &nbsp; width: 640&nbsp; &nbsp; height: 480&nbsp; &nbsp; visible: true&nbsp; &nbsp; title: qsTr("Focus sandbox")&nbsp; &nbsp; Grid {&nbsp; &nbsp; &nbsp; &nbsp; id: grid&nbsp; &nbsp; &nbsp; &nbsp; columns: 2&nbsp; &nbsp; &nbsp; &nbsp; spacing: 2&nbsp; &nbsp; &nbsp; &nbsp; property variant ids: [topLeft,topRight,bottomLeft,bottomRight]&nbsp; &nbsp; &nbsp; &nbsp; property variant currentId: 0&nbsp; &nbsp; &nbsp; &nbsp; Keys.onTabPressed: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("Current id: " + grid.currentId)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(grid.currentId < 3) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid.currentId++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid.currentId=0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; Rectangle {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: topLeft&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 50; height: 50&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: focus ? "red" : "lightgray"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; focus: grid.ids[grid.currentId] === this&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; Rectangle {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: topRight&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 50; height: 50&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: focus ? "red" : "lightgray"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; focus: grid.ids[grid.currentId] === this&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; Rectangle {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: bottomLeft&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 50; height: 50&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: focus ? "red" : "lightgray"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; focus: grid.ids[grid.currentId] === this&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; Rectangle {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: bottomRight&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 50; height: 50&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: focus ? "red" : "lightgray"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; focus: grid.ids[grid.currentId] === this&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}