博客

组件是可重用的，封装好的，并提供了已定义接口的QML类型，最常见的组件就是一个单独的QML文件。


如果有一个

LoginPage.qml

文件（可以看成一个组件），那么我们在main.qml文件（主qml文件）可以通过文件名的方式来调用这个组件，

LoginPage{...}

，示例：一个登录返回界面


main.qml

import QtQuick 2.0
import QtQuick.Window 2.2
Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    //加载不同组件，实现切换页面
    Loader{
        id:myLoader
    }
    //一开始显示登录页面
    Component.onCompleted: myLoader.sourceComponent = loginPage

    //登录页面
    Component{
        id:loginPage
        LoginPage{
            width:640
            height: 480
            anchors.centerIn: parent
        }
    }
  }

LoginPage.qml

import QtQuick 2.0
import QtQuick.Controls 2.3
Rectangle{
    id:root_login
    width: 600
    height: 480
    color: "#aaffff"
    radius: 8
    Qmlcpp{
        id:cpptest
        title: qsTr("login")
    }
    Component.onCompleted: {
        title = cpptest.title;
    }
    Text {
        id: miantext
        x: 274
        y: 79
        width: 120
        height: 29
        text: qsTr("主界面")
        font.strikeout: false
        font.underline: true
        font.bold: true
        font.italic: false
        wrapMode: Text.WrapAnywhere
        font.pixelSize: 20
    }
  }

如果两个qml文件在同一路径下，不需要进行额外的操作就可以调用

如果两个qml文件不在同一个路径下，则需要在main.qml的import部分增加一行，import …/LoginPage.qml