Why can't the contentData property of the menu be used in initialization?

[mirro]

Menu{
     height:contentData.lenght*50
}

[J.Hilk]

@mirro nothing specific only stuff all QML items have like for example:

import QtQuick 2.12
import QtQuick.Window 2.0
import QtQuick.Controls 2.12

import Qt.labs.settings 1.0

Window {
    id: window

    width: 300
    height: 300

    visible: true

    Button{
        id:switchModel


        height: 50
        width: 300

        text: "switch"
        onClicked: {
            leftSide = !leftSide
        }
    }

    property bool leftSide: true

    ListView{
        id:lView
        width: parent.width / 2
        height: 250
        y:50

        x: leftSide ? 0 : window.width - width
        Behavior on x {
            NumberAnimation{duration:500}
        }

        model: 20
        delegate: Rectangle{
            width: lView.width
            height: 50
            color: "green"
            Text{
                text: modelData
            }
        }
    }
}

[jsulm]

@mirro Is that the real code you have?
Because you do not have any children in Menu, so contentData.lenght will be 0, don't you think so?

[mirro]

@jsulm Menuitem must have been added

errors: QQmlExpression:Expression test.qml depends on non-NOTIFYable properties:QQuickMenu:contentData    
Unbale to assign [undefined] to double

[jsulm]

@mirro said in Why can't the contentData property of the menu be used in initialization?:

Menuitem must have been added

No idea what you are doing and what you are trying to tell me...

[J.Hilk]

@mirro well, there you have your answer, it is used during initialization, but the Menu height won't update when contentData changes. So you assign a constant to height that depending on implementation may be any number, who knows 🤷‍♂️

Use a real property or a real(known) constant

[mirro]

@J-Hilk I have individual question to consult next .
How can I click a button to make the ListView switch between different views?

[J.Hilk]

@mirro you mean switch between different model? Switching between different views doesn't make too much sense

import QtQuick 2.12
import QtQuick.Window 2.0
import QtQuick.Controls 2.12

import Qt.labs.settings 1.0

Window {
    id: window

    width: 300
    height: 300

    visible: true

    Button{
        id:switchModel


        height: 50
        width: 300

        text: "switch"
        onClicked: {
            if(lView.model == model1)
                lView.model = model2
            else
                lView.model = model1
        }
    }

    ListModel{
        id:model1
        ListElement{
            content: "a"
        }

        ListElement{
            content: "b"
        }
        ListElement{
            content: "c"
        }
    }

    ListModel{
        id:model2
        ListElement{
            content: "1"
        }

        ListElement{
            content: "2"
        }
        ListElement{
            content: "3"
        }
    }

    ListView{
        id:lView
        width: 300
        height: 250
        y:50

        model: model1
        delegate: Text{
            text: content
        }
    }
}

[mirro]

@J-Hilk sorry,I mean that clicking the mouse button triggers the listView to slide left or right effect.
Does the ListView provide relevant signals or methods?

[J.Hilk]

@mirro nothing specific only stuff all QML items have like for example:

import QtQuick 2.12
import QtQuick.Window 2.0
import QtQuick.Controls 2.12

import Qt.labs.settings 1.0

Window {
    id: window

    width: 300
    height: 300

    visible: true

    Button{
        id:switchModel


        height: 50
        width: 300

        text: "switch"
        onClicked: {
            leftSide = !leftSide
        }
    }

    property bool leftSide: true

    ListView{
        id:lView
        width: parent.width / 2
        height: 250
        y:50

        x: leftSide ? 0 : window.width - width
        Behavior on x {
            NumberAnimation{duration:500}
        }

        model: 20
        delegate: Rectangle{
            width: lView.width
            height: 50
            color: "green"
            Text{
                text: modelData
            }
        }
    }
}

[mirro]

@J-Hilk Thank you very much.One last question.
Is menuItem.highlighted available in QT5.9.7? The test program has no effect.

 Menu {
        id: menu
        widh:100
        height:100
        MenuItem {
            id:menuItem 
            width:100       
            height:40         
            text: "New..."   
            background:Rectangle{
                    color:menuItem.highlighted?'black':'red'
             }
        }
    }

[J.Hilk]

@mirro take a look at the documentation:
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-menu

for more information about that.

Since MenuItem inherits from Control, yes it has a background property since the very beginning :D, version independent
same for highlighted, its a thing since MenuItem was introduced in 5.7

[mirro]

@J-Hilk

Well, I don't know, but menuItem.highlighted is also false when I set hoverEnable:true

Menu {
        id: menu
        widh:100
        height:100
        MenuItem {
            id:menuItem 
            hoverEnable:true
            width:100       
            height:40         
            text: "New..."   
            background:Rectangle{
                    color:menuItem.highlighted?'black':'red'
             }
        }
    }

[J.Hilk]

@mirro for once there are 2 typos in your code

widh:100 -> width:100
and
hoverEnable:true -> hoverEnabled:true

[mirro]

@J-Hilk
Sorry, my work machine has no network, so I can't copy the code correctly.
The program I tested had no syntax errors, but menuItem.highlighted was always false, I don't know why.

Menu {
        id: menu
        width:100
        height:100
        MenuItem {
            id:menuItem 
            hoverEnabled:true
            width:100       
            height:40         
            text: "New..."   
            background:Rectangle{
                    color:menuItem.highlighted?'black':'red'
             }
        }
    }

[J.Hilk]

@mirro works fine for me:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 200
    title: qsTr("Hello World")
    id:root

    Component.onCompleted: menu.open()

    Menu{
        id:menu
        width: 640
        height: 100

        MenuItem{
            id:menuItem2
            width: 100
            height: 40
            text:"New..."
            hoverEnabled:true
            background:Rectangle{
                implicitWidth: 100
                implicitHeight: 40
                color: menuItem2.highlighted ? "black" : "red"
            }

        }
        MenuItem{
            id:menuItem1
            width: 100
            height: 40
            text:"Delete..."
            hoverEnabled:true
            background:Rectangle{
                implicitWidth: 100
                implicitHeight: 40
                color: menuItem1.highlighted ? "black" : "red"
            }
        }
    }
}

but I'm on 5.12.6 🤷‍♂️ I do not have any other version installed

[mirro]

@J-Hilk

highlighted attribute may be need to maintain yourself in QT5.9.7

[J.Hilk]

@mirro have you tried my fully working example code?

[mirro]

@J-Hilk

My working environment does not have Internet. I have tested it with similar code.
I maintaining this highlighted attribute in the background: Rectangle: MouseArea {} in Qt5.9.7 now.