如何将QML代码拆分为多个文件？

Question

我刚开始玩QML并且有一个视图,我有一堆组件如下:

Window {
    ....
    property Component dateTumbler: ControlView {
        // Definition follows
    }

    property Component timeTumbler: ControlView {
       // More definition follows
    }

    // More controls
}

这使得主QML文件编辑和维护非常冗长且繁琐.我试着把它分成不同的文件,如下所示:

// DateTumblerView.qml
component: DateTumblerView { // Not sure how to inherit here..
    // Definition here
}

我试图像这样使用它:

property component dateTumbler: DateTumblerView {}

然而,这永远不会奏效,而且DateTumblerView从未找到过.我不确定我是否正确这样做.

[编辑] ControlView定义如下:

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtMultimedia 5.5

Rectangle {
    id: view
    property bool darkBackground: false

    Text {
        id: textSingleton
    }

    SoundEffect {
        id: playCalSound
        source: "qrc:/sound/test.wav"
    }
}

[结束编辑]

将QML代码拆分成多个文件的正确方法是什么？

Answer 1

您的DateTumblerView.qml文件应如下所示:

ControlView {
   // More definition follows
}

你会像这样使用它:

property Component dateTumbler: DateTumblerView {}

要么:

Component {
    id: dateTumbler

    DateTumblerView {}
}

或者如果您想直接使用它:

DateTumblerView {}

它与您的代码只在一个文件中时几乎相同.您可以随时<Type> {}继承该类型,并可以设置或添加新属性,函数和子组件.区别在于它位于单独的文件中,具有特定名称(文件名),您可以根据需要重复使用该代码.

有关更多详细信息,请参阅定义要重用的自定义QML类型.