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

Question

我想以某种方式在 QML 中定义自定义焦点链，即有一个 JavaScript 函数决定下一个获得焦点的元素。焦点链由数组定义。代码如下：import QtQuick 2.12import QtQuick.Window 2.12import QtQuick.Controls 2.5Window {    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.12

import QtQuick.Window 2.12

import QtQuick.Controls 2.5

Window {

    width: 640

    height: 480

    visible: true

    title: qsTr("Focus sandbox")

    Grid {

        id: grid

        columns: 2

        spacing: 2

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

        property variant currentId: 0

        Keys.onTabPressed: {

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

            if(grid.currentId < 3) {

                grid.currentId++;

            }

            else {

                grid.currentId=0;

            }

        }

        Rectangle {

            id: topLeft

            width: 50; height: 50

            color: focus ? "red" : "lightgray"

            focus: grid.ids[grid.currentId] === this

        }

        Rectangle {

            id: topRight

            width: 50; height: 50

            color: focus ? "red" : "lightgray"

            focus: grid.ids[grid.currentId] === this

        }

        Rectangle {

            id: bottomLeft

            width: 50; height: 50

            color: focus ? "red" : "lightgray"

            focus: grid.ids[grid.currentId] === this

        }

        Rectangle {

            id: bottomRight

            width: 50; height: 50

            color: focus ? "red" : "lightgray"

            focus: grid.ids[grid.currentId] === this

        }

    }

}