目录布局镜像演示代码关键逻辑解析锚点切换演示代码关键逻辑解析工程下载本文将介绍两个与 UI 布局控制相关的实用工具LayoutMirroring布局镜像用于将整个布局左右翻转以适配从右向左RTL书写的语言AnchorChanges锚点切换则允许你在状态State切换时动态修改锚点而非直接操作x、y坐标从而实现平滑的布局变换。布局镜像页面中有一个白色背景的舞台舞台左上角排列着一组蓝色数字方块初始锚定在左侧。开启镜像功能后这排方块会整体移动至右侧从左往右的阅读顺序变为 4、3、2、1。此外舞台中部左侧放置了一个通过x坐标固定位置的橙色方块它不会受镜像影响。演示代码import QtQuick import QtQuick.Controls import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 12 TitleSeparator { title: 布局镜像 description: LayoutMirroring 是附加属性打开后把带锚点的布局整体左右翻转用来适配从右向左书写的语言。写死的 x 坐标不受影响。 } RowLayout { Layout.fillWidth: true spacing: 24 CheckBox { id: mirrorCheck text: enabled整体镜像 checked: false } CheckBox { id: inheritCheck text: childrenInherit子项跟随 checked: true } Item { Layout.fillWidth: true } } Rectangle { id: stage Layout.fillWidth: true Layout.fillHeight: true color: #FFFFFF border.color: #e0e0e0 radius: 8 clip: true LayoutMirroring.enabled: mirrorCheck.checked LayoutMirroring.childrenInherit: inheritCheck.checked // 带锚点的 Row开启镜像后贴到右边子项顺序也会翻转 Row { id: row anchors.left: parent.left anchors.top: parent.top anchors.leftMargin: 16 anchors.topMargin: 30 spacing: 8 Repeater { model: 4 Rectangle { width: 52 height: 52 radius: 6 color: #1296FF opacity: 0.35 index * 0.2 Text { anchors.centerIn: parent text: index 1 color: white font.pointSize: 15 font.bold: true } } } } Text { anchors.left: parent.left anchors.top: parent.top anchors.leftMargin: 16 anchors.topMargin: 8 text: 带锚点的 Rowx row.x.toFixed(0) color: #666 font.pointSize: 10 } Text { x: 16 y: stage.height / 2 - 22 text: 写死 x 的方块镜像对它无效 color: #E67E22 font.pointSize: 10 } Rectangle { x: 16 y: stage.height / 2 width: 52 height: 52 radius: 6 color: #E67E22 Text { anchors.centerIn: parent text: x16 color: white font.pointSize: 10 font.bold: true } } } } }关键逻辑解析需要明确的是镜像并非简单的“画面翻转”其核心在于改变了锚点的基准方向anchors.left会被视作anchors.right处理反之亦然。同时位置容器如 Row、Grid和特定的视图如横向 ListView的排列方向也会随之反转。这两个属性均为附加属性Attached Propertiesenabled用于控制当前容器及其子项是否启用镜像默认关闭childrenInherit则决定镜像效果是否向下传递同样默认关闭。因此在示例中我们开启了该选项确保内部的 Row 能够受到影响。示例中那行「带锚点的 Rowx …」用于直观验证开启镜像后该数字会跳至右侧证明锚点已生效。相比之下那个橙色方块则演示了镜像的局限正如 Qt 文档所述“mirroring does not affect any positioning that is defined by the Item x coordinate value”。凡是直接通过x或y坐标定位的元素镜像皆无法干预。因此在进行 RTL 适配时务必注意避开直接坐标定位。锚点切换我们通过四个按钮将同一个方块切换至四种不同位置并配置了 400 毫秒的位移动画。页面右上角实时显示了方块的x、y坐标及宽度信息。演示代码import QtQuick import QtQuick.Controls import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 12 TitleSeparator { title: 锚点切换 description: AnchorChanges 在状态里切换 Item 的锚点它只管锚点宽度、边距这类要另行用 PropertyChanges 改。切换时把不再使用的锚点设为 undefined否则新旧锚点会冲突。 } RowLayout { Layout.fillWidth: true spacing: 10 Button { text: 左上角; onClicked: stage.state topLeft } Button { text: 右下角; onClicked: stage.state bottomRight } Button { text: 横向铺满; onClicked: stage.state stretch } Button { text: 居中; onClicked: stage.state center } Item { Layout.fillWidth: true } Text { text: box x box.x.toFixed(0) y box.y.toFixed(0) w box.width.toFixed(0) color: #666 font.pointSize: 10 } } Rectangle { id: stage Layout.fillWidth: true Layout.fillHeight: true color: #FFFFFF border.color: #e0e0e0 radius: 8 clip: true Rectangle { id: box width: 140 height: 90 radius: 8 color: #1296FF anchors.left: parent.left anchors.top: parent.top anchors.margins: 20 Text { anchors.centerIn: parent text: box color: white font.pointSize: 14 font.bold: true } } states: [ State { name: topLeft AnchorChanges { target: box anchors.left: stage.left anchors.top: stage.top anchors.right: undefined anchors.bottom: undefined } }, State { name: bottomRight AnchorChanges { target: box anchors.right: stage.right anchors.bottom: stage.bottom anchors.left: undefined anchors.top: undefined } }, State { name: stretch AnchorChanges { target: box anchors.left: stage.left anchors.top: stage.top anchors.right: undefined anchors.bottom: undefined } // 宽度交给 PropertyChanges别用左右双锚点 // 双锚点会把 width 改成计算值退出该状态后回不到 140 PropertyChanges { target: box width: stage.width - 40 } }, State { name: center AnchorChanges { target: box anchors.horizontalCenter: stage.horizontalCenter anchors.verticalCenter: stage.verticalCenter anchors.left: undefined anchors.top: undefined anchors.right: undefined anchors.bottom: undefined } } ] transitions: Transition { AnchorAnimation { duration: 400 easing.type: Easing.OutQuad } } } } }关键逻辑解析点击按钮会触发舞台的state切换核心动作由状态内的AnchorChanges完成它修改元素的锚点并由Transition中的AnchorAnimation将这一变化过渡为平滑动画。在使用时有两个关键细节显式重置未使用的锚点每次切换状态时必须将不再需要的锚点显式设为undefined。例如从「横向铺满」切换到「居中」时如果不清空原来的left和right锚点方块就会同时受到新旧锚点的共同拉扯导致位置混乱。示例中严谨地清空了所有不必要的锚点虽然略显繁琐但这能确保逻辑的健壮性。宽度控制的注意事项AnchorChanges无法直接控制边距若需要修改宽度应配合PropertyChanges使用。特别注意如果通过同时指定anchors.left和anchors.right来实现拉伸锚点将直接接管并锁定width。此时若退出该状态width不会自动恢复至原先设置的 140。因此示例中采用「仅左锚点 PropertyChanges 控制宽度」的方案利用PropertyChanges在状态退出时自动还原width属性的特性保证了布局的可恢复性。工程下载我的 Qt 版本Qt 6.12.0操作系统Windows 11GitCodeQML 示例合集V2.0 - qml_layout_advanced
