QML 中宽度、高度与隐式宽度/高度的区别及其应用场景

在 QML 中，width、height 与 implicitWidth、implicitHeight 这几个属性常常令开发者感到困惑。本文将详细介绍它们之间的区别，并说明在何种情况下应使用隐式尺寸以及普通尺寸。

基本定义

• width 和 height：表示组件/item 的实际尺寸。
• implicitWidth 和 implicitHeight：表示组件/item 的自然尺寸，即在未明确指定尺寸时，组件自己希望占用的尺寸。

理解隐式尺寸和实际尺寸

隐式尺寸（Implicit Size）通常在创建可重用组件时使用。它表示组件在未设置明确尺寸时的自然大小。例如，一个图片的自然尺寸是其文件的实际像素大小，但这个尺寸可以被拉伸或缩小。

举例说明

假设我们有一个图片图库，其中的图片大小不一，我们希望这些图片在显示时可以缩小但不放大，此时可以使用隐式宽度和高度来存储图片的自然尺寸：

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

对于自定义组件，可以选择将尺寸定义为相对于组件的根节点，例如：

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

在这种情况下，组件没有自然尺寸，任何设置的尺寸都能完美地适配。

相反，如果我们有一个具有自然尺寸的对象，例如某些固定尺寸的组件：

Item {id: rootproperty alias model: repeater.modelRepeater {id: repeaterdelegate: Rectangle {width: 100height: 100x: 102 * indexy: 102 * index}}
}

在这种情况下，应向用户提供关于自然尺寸的信息，用户可以决定是否设置一个更小的尺寸并处理溢出，例如通过裁剪内容。

隐式尺寸的实际应用

在许多情况下，childrenRect.height 和 childrenRect.width 是隐式尺寸的良好度量标准，但也有例外。例如，当内容的 x 坐标为负值时，使用 childrenRect 可能并不合适。

一个实际例子是 Flickable，它专门用于包含比自身尺寸更大的对象。使 Flickable 的尺寸等于其内容的尺寸是不自然的。

注意，在自定义组件中使用 scale 时要小心，因为 childrenRect 不会意识到缩放。

Item {id: rootimplicitWidth: child.width * child.scaleimplicitHeight: child.height * child.scaleRectangle {id: childwidth: 100height: 100scale: 3color: 'red'}
}

实践准则

1. 当需要设置可重用组件的根节点的尺寸时，使用 implicitWidth 和 implicitHeight。
2. 在某些情况下，如果节点作为属性暴露出来，也可以为非根节点设置隐式尺寸。
3. 使用组件时，设置 width 和 height。

隐式尺寸不是必需的，但它们的存在是为了方便，并成为一种约定。

结论

理解和正确使用 width、height 与 implicitWidth、implicitHeight 对于 QML 开发者来说非常重要。隐式尺寸主要在描述组件的自然尺寸时使用，而实际尺寸在组件的布局和显示中更为常见。通过正确使用这些属性，可以创建更灵活和可重用的组件。