qt - 如何加载和显示 QML 文件

Question

我有两个 QML 页面main.qml，Kos.qml我想要的是当单击一个按钮时main.qml它会加载Kos.qml到屏幕中。

我确实尝试过使用加载器，但它不起作用

import QtQuick 2.5
import QtQuick.Controls 2.5


ApplicationWindow {
    id: applicationWindow
    width: 640
    height: 480
    color: "#fc4343"
    title: qsTr("Tabs")
    visible: true

    // HALAMAN UTAMA
    Page {
        anchors.centerIn: parent
        anchors.fill: parent
        id: page
        enabled: true

        Loader{
            id: kos
            active: true
            anchors.fill: parent
        }

        Button {
            id: button
            x: 198
            width: 87
            height: 30
            text: qsTr("Search")
            font.bold: true
            anchors.top: borderImage.bottom
            anchors.topMargin: 198
            anchors.right: toolSeparator.left
            anchors.rightMargin: 28
            MouseArea{
                anchors.fill: parent
                onClicked:{
                    kos.source = "Kos.qml";
                }

            }


            background: Rectangle {
                id: background
                color: "#ef3644"
            }

            contentItem: Text {
                id: textItem
                font: control.font
                opacity: enabled ? 1.0 : 0.3
                color: "white"
                text: "Search"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }
        }
   }

Kos.qml我PageBackground用作背景

import QtQuick 2.4

PageBackground {
    id: kos
    width: 640
    height: 480

    Text {
        id: element
        x: 6
        y: 20
        width: 24
        height: 32
        color: "#ffffff"
        text: qsTr("<")
        font.strikeout: false
        styleColor: "#ffffff"
        font.underline: false
        font.italic: false
        font.bold: true
        font.pixelSize: 25
        MouseArea {
            id: mouseArea
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            anchors.fill: parent
        }
   }
}

我在什么地方搞砸了吗？

Answer 1

我试图运行你的代码。由于我不知道您PageBackground是什么，因此我将其更改为Rectangle. 这对我行得通。尝试从最少的代码开始，然后在其上添加您的样式和功能。尝试使用以下最少的代码。将 main.qml 和 Kos.qml 保存在同一目录中，并确保将两个文件都添加到 qml 资源中。

main.qml

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    id: applicationWindow
    width: 640
    height: 480
    visible: true

    Text {
        anchors.centerIn: parent
        text: "App window"
    }

    Loader {
        id: loaderId
        anchors.fill: parent
        source: ""
    }

    Button {
        text: "click me!!"
        width: parent.width
        anchors.bottom: parent.bottom
        onClicked: {
            if(loaderId.source == "")
                loaderId.source = "Kos.qml"
            else
                loaderId.source = ""
        }
    }
}

Kos.qml

import QtQuick 2.9

Rectangle {
    id: kos
    width: 640
    height: 480
    color: "grey"

    Text {
        anchors.centerIn: parent
        text: "<b>Loaded Item</b>"
        color: "white"
    }
}