How to open sub-menu on right hand side in rtl alignments?

user_7054387 0
Viewed 324

I have a menu that consists of Items and sub-menus. the texts and titles of items should be shown from right to left. I achieved this by using LayoutMirroring.enabled = true.

    Menu {
        id: right_menu
        property var rtl: true;

        MenuItem {
            text: "گزینه ۱"
            LayoutMirroring.enabled: true
            LayoutMirroring.childrenInherit: true
        }

        Menu {
            title: "تنظیمات"

            MenuItem {
                LayoutMirroring.enabled: true
                LayoutMirroring.childrenInherit: true
                text: "گزینه ۱"
            }

            MenuItem {
                LayoutMirroring.enabled: true
                LayoutMirroring.childrenInherit: true
                text: "گزینه ۱"
            }
        }

        delegate: MenuItem {
            LayoutMirroring.enabled: true
            LayoutMirroring.childrenInherit: true
        }
    }

This is the output:

wrong output

However, this is not a valid output and I want to force the Menu to open subMenu on the right-hand side instead of left. this is the output I'm looking for:

expected output

How can I achieve this?

qtquick2 qml qt-creator qt c++
3 Answers

You can use the overlap property to shift the submenu over to the position you want.

Note that if the position of the menu is too close to the left or right edge of the window, it will still open on the opposite side.

Menu {
    id: right_menu
    property var rtl: true;

    MenuItem {
        text: "گزینه ۱"
        LayoutMirroring.enabled: true
        LayoutMirroring.childrenInherit: true
    }

    Menu {
        title: "تنظیمات"
        overlap: width * 2  // <<-- Shift the submenu over

        MenuItem {
            LayoutMirroring.enabled: true
            LayoutMirroring.childrenInherit: true
            text: "گزینه ۱"
        }

        MenuItem {
            LayoutMirroring.enabled: true
            LayoutMirroring.childrenInherit: true
            text: "گزینه ۱"
        }
    }

    delegate: MenuItem {
        LayoutMirroring.enabled: true
        LayoutMirroring.childrenInherit: true
    }
}
user_74271520

Thanks to @JarMan, his solution solves the problem if one just wants to rotate the menu(as is in my case). But a better solution for right to left languages is to make your whole app right to left; because in right to left languages, everything should be in this fashion. To do this, you can add the following line in the main.cpp file of your project.

app.setLayoutDirection(Qt::rightToLeft);

and then in any other Item or window, add the following lines:

LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
LayoutMirroring.childrenInherit: Qt.application.layoutDirection == Qt.RightToLeft
user_70543870

I suspect LayoutMirroring is causing your submenu to popUp in the wrong position. Instead of using LayoutMirroring to achieve the text format you'd like, use a custom text component and edit the alignment of the text there.

user_111213780
Related