利用LayoutMirroring来实现界面镜像布局

来源：互联网发布：知乎 ipad笔记编辑：程序博客网时间：2024/06/06 19:37

最近发现一个新的API叫做LayoutMirroring．运用这个API，我们可以在水平方向把我们的布局进行进行镜像显示．

我们还是先来看一个例子：

Main.qml

import QtQuick 2.4import Ubuntu.Components 1.3MainView {    id: main    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "layoutmirroring.liu-xiao-guo"    width: units.gu(60)    height: units.gu(85)    LayoutMirroring.enabled: rtl    LayoutMirroring.childrenInherit: true    property bool rtl: Qt.application.layoutDirection == Qt.RightToLeft    Page {        id: page        header: PageHeader {            id: pageHeader            title: i18n.tr("LayoutMirroring")            StyleHints {                foregroundColor: UbuntuColors.orange                backgroundColor: UbuntuColors.porcelain                dividerColor: UbuntuColors.slate            }            trailingActionBar.actions: [                Action {                    text: i18n.tr('Right to Left')                    iconName: 'flash-on'                    visible: !rtl                    onTriggered: rtl = !rtl                },                Action {                    text: i18n.tr('Left to Right')                    iconName: 'flash-off'                    visible: rtl                    onTriggered: rtl = !rtl                }            ]        }        Row {            anchors {                left: parent.left                right: parent.Right                top: page.header.bottom                bottom: parent.bottom            }            spacing: units.gu(1)            Repeater {                model: 5                Rectangle {                    color: "red"                    opacity: (5 - index) / 5                    width: units.gu(5); height: units.gu(5)                    Text {                        text: index + 1                        anchors.centerIn: parent                    }                }            }        }    }}

在上面的例程中，我们在我们的MainView中使用了一个attached property: LayoutMirroring．当它的属性LayoutMirroring.enabled为真时，它使得我们的界面的UI布局将在在水平方向上从右向左布局．

运行我们的例程的效果：

当我们点击上面图中的闪电的图标时，我们会看见布局在水平方向发生改变，并变为从右侧开始的．当我们点击禁止闪电标志的图标时，就会恢复以前的布局．

整个项目的源码在：https://github.com/liu-xiao-guo/layoutmirroring

0 0