why setLayoutDirection doesn't work in my Qt Quick demo? - qt

Question

I want to set my demo layout is Right to Left, and I set this in main function, like this:
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
app.setLayoutDirection(Qt::RightToLeft)
return app.exec();
}
Here is my qml file:
import QtQuick 2.6
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
id:root
Row {
spacing: 20
Repeater {
model: 5
Rectangle {
color: "red"
opacity: (5 - index) / 5
width: 70; height: 30
Text {
text: index + 1+" hello"
width:parent.width
}
}
}
}
}
However the layout result still is left to right:
How can I get the real RTL layout, all components are right to left, include the text, just like this:

Answer 1

Right-to-left User Interfaces says that you should use the LayoutMirroring attached properties. Taking the example from that page:
import QtQuick 2.0
Rectangle {
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
width: 300; height: 50
color: "yellow"
border.width: 1
Row {
anchors { left: parent.left; margins: 5 }
y: 5; spacing: 5
Repeater {
model: 5
Rectangle {
color: "red"
opacity: (5 - index) / 5
width: 40; height: 40
Text {
text: index + 1
anchors.centerIn: parent
}
}
}
}
}