时间戳

首页 > 解决方案 > 在 QML 中嵌套加载器

qt - 在 QML 中嵌套加载器

问题描述

我正在尝试以模块化方式编写我的 QML 组件，以便能够动态更改图形，但我正在努力将它们嵌套在一个层次上，下面是一个示例：

import QtQuick 2.0
import QtGraphicalEffects 1.0

WindowFrame {
    id: this_item

    property Component body //this wont load the component
    property alias footer: footer_loader.sourceComponent //this gives an error -> Invalid alias reference. Unable to find id "footer_loader"

    property int footer_height: 70

    body: Item {
        id: body_component

        Loader {
            id: body_loader
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            height: parent.height-this_item.footer_height
            sourceComponent: this_item.body
        }

        Item {
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            height: this_item.footer_height
            z: 2

            Rectangle {
                anchors.fill: parent
                color: Qt.rgba(0, 0, 0.5, 1)

                layer.enabled: true
                layer.effect: DropShadow {
                    transparentBorder: true
                    horizontalOffset: 0
                    verticalOffset: -8
                    radius: 8.0
                    samples: 17
                    color: Qt.rgba(0, 0, 0, 0.5)
                }
            }

            Loader {
                id: footer_loader
                anchors.fill: parent
            }
        }
    }
}

目标是构建具有预定义空间的组件（例如卡片），然后在其中加载其他元素，除了使用加载器之外没有找到其他任何东西，它是如何完成的？有更好的方法吗？

标签： qtqmlcomponents

解决方案

你必须创建组件类型对象，而不是项目类型

import QtQuick 2.0
import QtGraphicalEffects 1.0

WindowFrame {
    id: this_item

    property Component body //this wont load the component


     /*          
      * here is where you went wrong *  
      *  
      */
    body: Component {   // change Item to Component


        id: body_component


    }

     Card {
         id: myCard

     }
     Component.onCompleted {
        myCard.load_face("qrc:///jack.png")
     }
}

但更好的答案是创建多个 QML 文件并动态创建这样的东西

卡片.qml

Item {
  id: card
  Rectangle {   
     width: 100
     height: 100

  }
  function load_face(imageSource) {
         var component = Qt.createComponent("CardFace.qml");
  if (component.status == Component.Ready)
      component.createObject(card, {"imageSource": imageSource, "y": 100});

  }
}

CardFace.qml

Item {
    id: face
    property var imageSource
    Image {
         source: face.imageSource
     }
}

推荐阅读