QML Changing style of TextField's menu

Question

I would like to customize style of my application and I'm stuck on the style of TextField pop-up menu.

TextField.style allows to customize the look of TextField but it doesn't contain the style of the menu. According to documentation there is a property menu containing the Menu so I tried something like this:

TextField {
   menu.style: MenuStyle {
       //...
   }
}

Code above complains that property style is non-existent so it's not exactly Menu, it's Component used to create the menu and I don't know if there is a way to get through it to the actual Menu. Documentation only mentions that TextField.menu can be set to null to disable it completely and doesn't provide other use cases.

So is there a way to get to the menu of TextField and change its style?

score 1 · Answer 1 · edited Jul 21 '15 at 07:37

1

Well, you should post all relevant code here. Anyway, you cannot define the TextField menu and its style separately. See the example below to customize Menu style and adding it to the TextField inline:

TextField {
    text: "text here"
    anchors.centerIn: parent
    menu: Menu {
        style: MenuStyle {
            frame: Rectangle {
                color: "green"
                border.color: "purple"
            }
            itemDelegate {
                background: Rectangle {
                    color: "yellow"
                }
                label: Text {
                    color: styleData.selected ? "red" : "blue"
                    text: styleData.text
                }
            }
        }
        MenuItem { text: "Cut" }
        MenuItem { text: "Copy" }
    }
}

See this page for complete list of MenuStyle properties.

edited Jul 21 '15 at 07:37

BaCaRoZzo

7,502
6
51
82

answered Jul 21 '15 at 00:52

folibis

12,048
6
54
97

Is there a way to change Menu style without reimplementing the Menu? As I understand I would need to supply my own actions for "Cut", "Copy", etc. in this solution. – Krzysztof Piekutowski Jul 21 '15 at 15:55
I don't think it's possible. `TextField.menu` is `Component` and it just has no property `style`. – folibis Jul 21 '15 at 23:46
Thanks @folibis, so what properties does it have? `TextField.menu.url` pointed me to file `Qt5.5.0/5.5/gcc_64/qml/QtQuick/Controls/Private/EditMenu_base.qml` which implements the default menu. I copied it to my project and changed it a little bit to accept custom menu style, and bound it to my TextField. It's messy but it works. – Krzysztof Piekutowski Jul 22 '15 at 20:59
Yes, it looks that the only way to do that. – folibis Jul 22 '15 at 23:07
@krzysiek: do you try to use this menu on iOS or Android ? Because I am not successfully. – Libor B. Feb 17 '16 at 11:12
@LiborB. No, I only tried to use it in desktop application. – Krzysztof Piekutowski Feb 17 '16 at 14:24

QML Changing style of TextField's menu

1 Answers1