宽度,高度和implicitWidth/Height之间的差异以及QML中的相应用例

Question

width/height和implicitWidth/HeightQML有什么区别？应该何时设置隐式维度而不是常规维度？何时应该从组件/项目中询问隐式维度而不是常规维度？

Answer 1

通常,implicitHeight/Width仅在可重用组件内使用才有意义.

它提供了项目的自然大小的提示,但没有强制执行此大小.

我们Image以一个例子为例.图像的自然尺寸将图像文件中的一个像素映射到屏幕上的一个像素.但它允许我们拉伸它,因此大小不会被强制执行并且可以被覆盖.

现在让我们说,我们希望有一个图库,其中包含未知维度的图片,我们不希望增长,但只在必要时缩小它们.所以我们需要存储图像的自然尺寸.也就是说,隐含高度发挥作用.

Image {
    width: Math.max(150, implicitWidth)
    height: Math.max(150, implicitHeight)
}

在自定义组件中,您可以选择如何定义大小.

唯一的选择是,使所有维度相对于组件root-node,可能是这样的:

Item {
    id: root
    Rectangle {
        width: root.width * 0.2
        height: root.height * 0.2
        color: 'red'
    }
    Rectangle {
        x: 0.2 * root.width
        y: 0.2 * root.height
        width: root.width * 0.8
        height: root.height * 0.8
        color: 'green'
    }
}

在这种情况下,对象没有自然大小.对于为组件设置的每个尺寸,一切都很完美.

另一方面,您可能有一个具有自然大小的对象 - 例如,如果您有绝对值

Item {
    id: root
    property alias model: repeater.model
    Repeater {
        id: repeater
        delegate: Rectangle {
            width: 100
            height: 100
            x: 102 * index
            y: 102 * index
        }
    }
}

在此示例中,您应该向用户提供有关自然大小的信息,其中内容不会突出显示该项目.用户可能仍然决定设置较小的尺寸并处理突出物,例如通过剪切它,但是他需要关于自然尺寸的信息来做出他的决定.

在许多情况下,这childrenRect.height/width是一个很好的衡量标准implcitHeight/Width,但也有一些例子,这不是一个好主意.- 例如,当项目的内容具有时x: -500.

一个真实的例子是Flickable专门设计用于包含比其自身大小更大的对象.具有Flickable等于内容的大小将是不自然的.

scale在自定义组件中使用时也要小心,因为childrenRect不会知道缩放.

Item {
    id: root
    implicitWidth: child.width * child.scale
    implicitHeight: child.height * child.scale
    Rectangle {
        id: child
        width: 100
        height: 100
        scale: 3
        color: 'red'
    }
}

您的评论:我只是不明白为什么设置implicitWidth/Height更好,而不是设置组件根维度的宽度/高度.

implicitWidht/Height不是必要的 - QtQuick可以没有他们.它们是为了方便而存在,应该是惯例.

经验法则

如果要设置可重用组件的根节点的维度,请进行设置implicitWidth/Height.
在某些情况下,如果节点作为属性公开,则将其设置为非根节点.
只有这样,如果你有理由(许多官方组件没有任何原因).
使用组件时,请设置width/height.

Answer 2

我没有明确的答案,但我可以告诉你我发现了什么.首先,从文档:

implicitWidth:真实

如果未指定宽度或高度,则定义Item的自然宽度或高度.

大多数项的默认隐式大小为0x0,但是某些项具有固有的隐式大小,例如,Image和Text.

但宽度信息量较少:

宽度

定义项目的位置和大小.

该width和height反映在场景中的项目的实际大小.隐式大小是项目本身的某种固有属性.¹

我使用它们如下:当我创建一个新项目,它可以调整大小,我设置一个隐含的大小内的对象².当我使用该对象时,我经常从外部明确设置实际大小.

可以通过设置高度和宽度来覆盖对象的隐式大小.

一个例子:TextWithBackground.qml

Item {
    implicitWidth: text.implicitWidth
    implicitHeight: text.implicitHeight
    // the rectangle will expand to the real size of the item
    Rectangle { anchors.fill: parent; color: "yellow" }
    Text { id: text; text: "Lorem ipsum dolor..." }
}

一个例子:MyWindow.qml

Item {
    width: 400
    height: 300
    TextWithBackground {
         // half of the scene, but never smaller than its implicitWidth
         width: Math.max(parent.width / 2, implicitWidth)
         // the height of the element is equal to implicitHeight
         // because height is not explicitly set
    }
}

_{1)对于某些元素,如Text,隐式高度取决于(非隐式)宽度.
2)隐式大小通常取决于其子级的隐式大小.}