利用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