Qt Quick 示例 - 定位器
本页面汇集了 QML 定位器示例。
“定位器”是一组与定位器相关的简短 QML 示例。每个示例都是一个简短的 QML 文件，重点展示特定类型或功能。如需了解更多信息，请访问《Qt Quick 中的重要概念——定位》。
运行示例
您可以通过以下方式运行示例：
- Qt Creator
打开Welcome 模式，并从Examples 中选择示例。如需了解更多信息，请参阅Qt Creator ：教程：构建与运行。
- Qt Extension for Visual Studio Code
在“Command Palette ”中运行Qt: Open Qt examples 命令，并从列表中选择该示例。有关更多信息，请参阅Qt Extension for Visual Studio Code ：教程：构建和运行。
过渡效果
“过渡”功能在显示或隐藏定位器中的项目时，会呈现动画过渡效果。它包含一个场景，其中放置了位于各种定位器中的项目：Column 、Row 、Grid 以及Flow 。每个定位器都具有被描述为“过渡”的动画。
move: Transition {
NumberAnimation {
properties: "x,y"
easing.type: Easing.OutBounce
}
}“移动”过渡效果指定了当定位器内的项目因其他项目的出现或消失而被位移时，其动画效果。
add: Transition {
NumberAnimation {
properties: "x,y"
easing.type: Easing.OutBounce
}
}“add”过渡指定了项目被添加到定位器时如何出现。
populate: Transition {
NumberAnimation {
properties: "x,y"
from: 200
duration: 100
easing.type: Easing.OutBounce
}
}“填充”过渡指定了当父定位器首次创建时，其中的项目将如何出现。
附加属性
“附加属性”展示了如何使用“定位器”附加属性来确定项目在定位器中的位置。
Rectangle {
id: green
color: "#80c342"
width: 100 * page.ratio
height: 100 * page.ratio
Text {
anchors.left: parent.right
anchors.leftMargin: 20
anchors.verticalCenter: parent.verticalCenter
text: qsTr("Index: %1%2%3").arg(parent.Positioner.index)
.arg(parent.Positioner.isFirstItem ? qsTr(" (First)") : "")
.arg(parent.Positioner.isLastItem ? qsTr(" (Last)") : "")
}
// When mouse is clicked, display the values of the positioner
MouseArea {
anchors.fill: parent
onClicked: column.showInfo(green.Positioner)
}
}© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
