qml - 无法实例化多个 QML 对象

Question

这是我的 QML 文件，其中包含一个文本组件:

import QtQuick 2.0

Item {
    id: idItmWrapText
    Text {
        id: idTxtTitle
        text: qsTr("Hello World")
        font.pointSize: 20
       }
}

现在在 Test.qml 文件中，我将上述组件实例化了三次，但它在输出中只显示一次。我的 Test.qml 文件如下所示:

import QtQuick 2.0

Item {
    id: idItmWrapRect
    width: 400
    height: 400
    Rectangle{
        id: idRectDisplay

        width: parent.width
        height: parent.height

        Column {
            id: idClmnLayout
            spacing: 50
            x: 195
            y: 200

           MyText{

            }
            MyText{

            }
            MyText{

            }
        }
    }



}

输出是:

                     **Hello World**     //showing only once

为什么会这样？

Answer 1

这很正常:事实上，您的组件显示了 3 次，但彼此重叠，所以您认为只有其中一个...

为什么？

仅仅是因为在您的组件中，您将 Text 放在了 Item 中，但您没有告诉 Item 与内部 Text 的大小相同，因此它保持 0x0 大小。

但是为什么文本是可见的？

默认情况下Item是不裁剪的，这意味着即使超出了Item的边界也可以显示内容。

如何解决？

只需将文本正确锚定在项目内，并将项目高度绑定(bind)到文本实际高度上，在您的自定义组件内:

import QtQuick 2.0

Item {
    id: itmWrapText;
    width: 400; // default width of the component
    height: txtTitle.contentHeight; // bind height on Text content size

    property alias title : txtTitle.text; // btw, expose property to be able to set text

    Text {
        id: txtTitle;
        text: qsTr ("Hello World");
        font.pointSize: 20;
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere; // wrap content if necessary
        anchors { // force Text to stay in parent Item
            top: parent.top;
            left: parent.left;
            right: parent.right;
        }
    }
}

它已经完成了!