在 QML 中定义和组合自定义元素的正确方法答案

【问题标题】：Proper way of defining and composing custom elements in QML在 QML 中定义和组合自定义元素的正确方法
【发布时间】：2021-05-07 22:21:54
【问题描述】：

假设我想在 QML 中创建一个字段元素，该元素具有其“字段”部分，并且可以在右侧、左侧有图标或根本不显示它。基本的 qml 代码如下所示（没有换边功能）：

// TestField.qml
Item
{
    Image
    {
        anchors.right: field.left
        anchors.top: field.top

        source: "qrc:/res/settings/logOptions.svg"
        height: 40
        width: 40
    }

    Rectangle
    {
        id: field
        anchors.fill: parent

        color: "blue"
    }
}

那我就这样用：

// Main.qml
TestField
{
    x: 100
    y: 100

    height: 100
    width: 100
}

或者在一些网格布局中使用它，将它锚定到另一个元素等。我使用硬编码的坐标和大小只是为了让问题更简单。

问题在于我为元素指定了大小 (100x100)，而我的 field 矩形将填满整个空间，使图标“悬空”超出该元素的范围。在这种情况下，QML 会将此元素视为大小为 100x100，但由于图标超出范围，带有图标的整个元素的实际大小更大（140x100），并且在放入布局时可能与其他此类元素重叠。

值得注意的是，对于此类元素，我希望能够将图标的位置更改为矩形的左侧或右侧（它将是某种具有枚举值的属性，我将在代码中定义它不会在整个应用程序工作期间动态变化），因此一些矩形会有不同侧面的图标。

我看到的一个解决方案是修改 TestField，使其元素与父级的宽度或高度相关联，例如：

Item
{
    Image
    {
        x: 0
        y: 0
        width: parent.width / 2
        height: parent.width / 2
    }

    Rectangle
    {
        id: field
        x: parent.width / 2
        y: 0
        width: parent.width / 2
        height: parent.height
    }
}

问题是 - 这是一个好的解决方案还是有解决此类问题的适当方法？我主要关心的是元素大小实际上应该是我可以使用element.width 或element.height 查询的大小，并且内部部分都没有超出可能与其他元素重叠的范围。也许我错过了一些基本概念，使我能够制作始终将其部分保持在其范围内的元素？

【问题讨论】：

标签： qt qml

【解决方案1】：

您的大小问题是您的Rectangle 占据了其父级的整个大小。您想缩小它以考虑Image 的大小。我还添加了一种在左侧和右侧之间切换图像的方法。

Item
{
    property bool imageOnLeft: true

    Image
    {
        id: img
        anchors.left: imageOnLeft ? parent.left : field.right

        source: "qrc:/res/settings/logOptions.svg"
        height: 40
        width: 40
    }

    Rectangle
    {
        id: field
        anchors.left: imageOnLeft ? img.right : parent.left
        width: parent.width - img.width
        height: parent.height

        color: "blue"
    }
}

【讨论】：