QML使用JavaScript定义焦点链序列

我想以某种方式在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();
        }
    }
}

---

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

这是由于绑定造成的。每次执行“testFocusDispatcher”时，“currentId”都会更改，这将导致绑定重新评估，从而导致“testFocusDispatcher”执行等。。。你看到问题了

相反，我会这样做：

QML KeyNavigation: Binding loop detected for property "tab"

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
        }
    }
}

导入QtQuick 2.12
导入QtQuick.Window 2.12
导入QtQuick.Controls 2.5
窗口{
宽度：640
身高：480
可见：正确
标题：qsTr（“焦点沙箱”）
网格{
id:网格
栏目：2
间距：2
属性变量ID:[左上、右上、左下、右下]
属性变量currentId:0
按Keys.ontab键：{
console.log（“当前id:+grid.currentId”）
if（grid.currentId<3）{
grid.currentId++；
}
否则{
grid.currentId=0；
}
}
长方形{
id:左上角
宽度：50；高度：50
颜色：聚焦？“红色”：“浅灰色”
焦点：grid.ids[grid.currentId]==此
}
长方形{
id:右上角
宽度：50；高度：50
颜色：聚焦？“红色”：“浅灰色”
焦点：grid.ids[grid.currentId]==此
}
长方形{
id:左下角
宽度：50；高度：50
颜色：聚焦？“红色”：“浅灰色”
焦点：grid.ids[grid.currentId]==此
}
长方形{
id:右下角
宽度：50；高度：50
颜色：聚焦？“红色”：“浅灰色”
焦点：grid.ids[grid.currentId]==此
}
}
}