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

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

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

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
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