最近发现一个新的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布局将在在水平方向上从右向左布局．
\
运行我们的例程的效果：
\
\
\
当我们点击上面图中的闪电的图标时，我们会看见布局在水平方向发生改变，并变为从右侧开始的．当我们点击禁止闪电标志的图标时，就会恢复以前的布局．
\
整个项目的源码在： github.com/liu-xiao-gu…
