Qt QML中继器的设计与逻辑如何分离

使用QML时，Qt Creator建议将设计和逻辑分为两个QML文件，例如File.QML和FileForm.ui.QML，前者用于逻辑，后者用于设计。如果文件不包含复杂的代码，比如函数调用或{}代码块（我使用的是Ubuntu18.04附带的QtCreator4.5.2），它只能在VisualDesigner中显示文件

现在是问题：当我使用Repeater及其委托时，如何将复杂代码移出ui.qml

例如：

我的

FileForm.ui.qml

如下所示：

import "displayutils.js" as Utils

RowLayout {
    property alias rr: rr
    property alias tt: tt
    Repeater {
        id: rr
        Text {
            id: tt
            text: "text: "+ Utils.fmtTemp(modelData.temp)+" / "+Utils.fmtPressure(modelData.pressure)
        }
    }
}

File {
    Component.onCompleted: {
        rr.model = ... // some model from C++ code, does not matter.
    }    
}

我在

File.qml

中实例化它，如下所示：

import "displayutils.js" as Utils

RowLayout {
    property alias rr: rr
    property alias tt: tt
    Repeater {
        id: rr
        Text {
            id: tt
            text: "text: "+ Utils.fmtTemp(modelData.temp)+" / "+Utils.fmtPressure(modelData.pressure)
        }
    }
}

File {
    Component.onCompleted: {
        rr.model = ... // some model from C++ code, does not matter.
    }    
}

现在，Qt Creator不想打开

FileForm.ui.qml

文件，因为文本格式复杂，我必须将其移动到file.qml。如何正确地执行此操作？无论我尝试了什么，我都从Repeater中释放了modelData对象。我尝试了各种不同的方法：

File {
    tt.text = someFunction(modelData)
    Component.onCompleted: {
        rr.model = ... // some model from C++ code, does not matter.
    }    
}

---

我发现这种分离非常有用，并且一直在使用它。在这种情况下，您可以通过如下方式分离中继器的子项来完成此操作：

import "displayutils.js" as Utils

RowLayout {
    property alias rr: rr
    property alias tt: tt
    Repeater {
        id: rr
        Text {
            id: tt
            text: "text: "+ Utils.fmtTemp(modelData.temp)+" / "+Utils.fmtPressure(modelData.pressure)
        }
    }
}

File {
    Component.onCompleted: {
        rr.model = ... // some model from C++ code, does not matter.
    }    
}

RepeaterTextForm.ui.qml：

Text {}

RowLayout {
    property alias rr: rr
    Repeater {
        id: rr
        RepeaterText {}
    }
}

RepeaterText.qml：

import "displayutils.js" as Utils 

RepeaterTextForm {
    text: (
        "text: " + 
        Utils.fmtTemp(modelData.temp) + 
        " / " + 
        Utils.fmtPressure(modelData.pressure)
    )
}

FileForm.ui.qml：

Text {}

RowLayout {
    property alias rr: rr
    Repeater {
        id: rr
        RepeaterText {}
    }
}

File.qml：

File {
    Component.onCompleted: {
        rr.model = ... // some model from C++ code, does not matter.
    }    
}

---

我很久以前就停止使用这种分离了。但是，您可能可以通过专门为委托创建一个QML来解决这个问题：在这种情况下，您可以将它放在中继器中，只需将

modelData

作为属性分配给委托类型，并且在委托内部，您可以使用函数感谢您的建议。但我的Qt创建者在本例中给出了“Qt仿真层崩溃”。要么是我的布局太复杂（我怀疑），要么就是有车。谢谢！它在Qt设计器中看起来如何？打开FileForm.ui.qml时是否显示最深的文本元素？我会在几天后亲自检查，但万一你已经知道了。刚刚看到你的评论。在设计模式下，它应该按照预期的方式查看和呈现所有组件。尝试过之后，QML引擎在我的电脑上崩溃了。我真的理解它-如果引擎不理解函数调用，那么如果它们被深埋在include树中，它也不会理解它们…如果你不介意，我将从你的答案中创建一个可复制的崩溃示例。