Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

[SOLVED ]Cant access alias from Item



  • Hello!

    I am trying to access an alias from an Item and it is not working. Can anyone help me?

    In main.qml, when I try DelegateLancamentos.removeMouseArea: it returns this message:
    qrc:/DelegateLancamentos.qml:10 Invalid alias reference. Unable to find id "removeMouseArea"

    Code below:

    MainForm.ui.qml

    Rectangle {
        id: mainContainer
    
        property alias lancamentosListView: lancamentosListView
    
        width: 360
        height: 640
    
        ListView {
            id: lancamentosListView
    
            anchors.fill: parent
    
            clip: true
    
            spacing: 10
        }
    }
    

    ModeloLancamentos.qml

    ListModel {
        ListElement {
            valor: "25.000,00"
            tipo: "Investimento"
        }
    }
    

    DelegateLancamentos.qml

    Item {
        id: delegateItem
    
        property Component delegateComponent: delegateComponent
        property alias removeMouseArea: removeMouseArea
    
        Component {
            id: delegateComponent
    
            Row {
                Column {
                    width: 360 * 0.96 / 8 * 6
                    //width: Screen.width * 0.96 / 8 * 6
    
                    Text {
                        text: "<strong>" + "Valor: " + valor + "</strong>"
                        font.pixelSize: 16
                    }
                    Text {
                        text: "Tipo: " + tipo
                        font.pixelSize: 16
                    }
                }
    
                Column {
                    width: 360 * 0.96 / 8
                    //width: Screen.width * 0.96 / 8
    
                    Image {
                        id: removeImage
                        source: "Imagens/remove.png"
    
                        width: 35
    
                        fillMode: Image.PreserveAspectFit
    
                        MouseArea {
                            id: removeMouseArea
    
                            anchors.fill: parent
                        }
                    }
                }
            }
        }
    }
    

    main.qml

    Window {
        visible: true
    
        width: 360
        height: 640
    
        maximumHeight: 640
        minimumHeight: 640
    
        maximumWidth: 360
        minimumWidth: 360
    
        title: "InvestmentC-Mobile"
    
        MainForm {
            anchors.fill: parent
    
            mainContainer.width: parent.width
            mainContainer.height: parent.height
    
            lancamentosListView.model: modeloLancamentos
            lancamentosListView.delegate: delegateLancamentos.delegateComponent
    
            DelegateLancamentos.removeMouseArea:
            {
                modeloLancamentos.remove(index);
            }
        }
        
        ModeloLancamentos{
            id: modeloLancamentos
        }
    
        DelegateLancamentos {
            id: delegateLancamentos
        }
    }
    

  • Moderators

    Hi @guidupas,
    alias's works with property and not with the Component itself.



  • @guidupas

    Try renaming your alias to something else:

    property alias myRemoveMouseArea: removeMouseArea



  • @t3685

    It did not work.

    @p3c0

    Could you help me to solve it?



  • @guidupas

    Did read your code properly. You can't have alias to properties/elements of a Component.



  • @t3685
    First of all, thank you for the replies.

    Yes, I figured that out. Bur how could I make it work. There is someway to do something that could solve this?

    Thank you very much.



  • @guidupas

    Hi,

    You need to work top down: create the necessary properties in delegateItem your removeMouseArea can access or have it call function or signals of delegateItem as needed. Why are you putting it in a Componentin the first place?



  • @t3685

    Hey.

    Because it is to delegate a model. When I put it inside an Item it behaves differently then a Component.



  • @t3685 @p3c0

    What I really need is that:

    In MainForm.ui.qml I have two rectangle. I need when i click the mouse area from a delegate component set rec1.visible = false and rec2.visible = true (files below)

    How can I do that?

    MainForm.ui.qml

    Rectangle {
    id: mainContainer

    property alias lancamentosListView: lancamentosListView
    property alias rc1: rec1
    property alias rc2: rec2
    
    width: 360
    height: 640
    
    ListView {
        id: lancamentosListView
    
        anchors.fill: parent
    
        clip: true
    
        spacing: 10
    }
    
    Rectangle {
        id: rec1
    }
    
    Rectangle {
        id: rec2
    }
    

    }

    ModeloLancamentos.qml

    ListModel {
    ListElement {
    valor: "25.000,00"
    tipo: "Investimento"
    }
    }

    DelegateLancamentos.qml

    Item {
    id: delegateItem

    property Component delegateComponent: delegateComponent
    property alias removeMouseArea: removeMouseArea
    
    Component {
        id: delegateComponent
    
        Row {
            Column {
                width: 360 * 0.96 / 8 * 6
                //width: Screen.width * 0.96 / 8 * 6
    
                Text {
                    text: "<strong>" + "Valor: " + valor + "</strong>"
                    font.pixelSize: 16
                }
                Text {
                    text: "Tipo: " + tipo
                    font.pixelSize: 16
                }
            }
    
            Column {
                width: 360 * 0.96 / 8
                //width: Screen.width * 0.96 / 8
    
                Image {
                    id: removeImage
                    source: "Imagens/remove.png"
    
                    width: 35
    
                    fillMode: Image.PreserveAspectFit
    
                    MouseArea {
                        id: removeMouseArea
    
                        anchors.fill: parent
                    }
                }
            }
        }
    }
    

    }

    main.qml

    Window {
    visible: true

    width: 360
    height: 640
    
    maximumHeight: 640
    minimumHeight: 640
    
    maximumWidth: 360
    minimumWidth: 360
    
    title: "InvestmentC-Mobile"
    
    MainForm {
        anchors.fill: parent
    
        mainContainer.width: parent.width
        mainContainer.height: parent.height
    
        lancamentosListView.model: modeloLancamentos
        lancamentosListView.delegate: delegateLancamentos.delegateComponent
    
        DelegateLancamentos.removeMouseArea:
        {
            modeloLancamentos.remove(index);
        }
    }
    
    ModeloLancamentos{
        id: modeloLancamentos
    }
    
    DelegateLancamentos {
        id: delegateLancamentos
    }
    

    }


  • Moderators

    @guidupas You can keep a simple bool property, Bind this to the visible property of both the Rectangle. Then when needed update this property to true or false which in turn will modify the visible property of Rectangle.

    property bool rectVisible : false
    
    Rectangle {
        id: rec1
        visible: rectVisible
    }
    
    Rectangle {
        id: rec2
        visible: !rectVisible
    }
    


  • @p3c0

    But where I declare the property. I tried to declare inside MainForm.ui.qml, inside MainForm at main.qml and inside DelegateLancamentos.qml. In neither of them I could access the property from the MouseArea inside the delegate component.


  • Moderators

    @guidupas
    main.qml contains Mainform where it then loads the delegate. So declaring a property in main.qml itself will be accessible from MainForm as well as the Delegate. It should work.

    Apart from that I found some other issues where in you may think its not working:

    • The ListView in Mainform fills the whole container thus hiding those 2 Rectangle's. Either set z property for those Rects higher than that of ListView or reduce the ListView height.
    • Provide a width and height for those 2 Rectangle's or else the wont be
      rendered.


  • @p3c0 Thank you for all your help. It worked.

    I am posting here a minimal example just to exemplify for who needs.

    MainForm.ui.qml

    import QtQuick 2.4
    import QtQuick.Controls 1.2
    import QtQuick.Layouts 1.1
    
    Rectangle {
        id: mainContainer
    
        property alias mainContainerA: mainContainer
        property alias buttonA: button
        property alias listviewA: listView
        property alias rect1A: rect1
        property alias rect2A: rect2
    
        width: 600
        height: 600
    
        Button {
            id: button
    
            anchors.top: parent.top
    
            text: "Insert value"
    
            height: parent.height * 0.1
            width: parent.width
        }
    
        ListView {
            id: listView
    
            anchors.top: button.bottom
    
            clip: true
    
            height: parent.height * 0.5
            width: parent.width
        }
    
        Rectangle {
            id: rect1
    
            visible: true
    
            anchors.top: listView.bottom
    
            width: parent.width
            height: parent.height * 0.4
    
            color: "blue"
        }
    
        Rectangle {
            id: rect2
    
            visible: false
    
            anchors.top: listView.bottom
    
            width: parent.width
            height: parent.height * 0.4
    
            color: "red"
        }
    }
    

    main.qml

    import QtQuick 2.4
    import QtQuick.Window 2.2
    
    Window {
        visible: true
    
        width: 600
        height: 600
    
        MainForm {
            anchors.fill: parent
    
            listviewA.model: modelM
            listviewA.delegate: delegateM.delegateComponent
    
            buttonA.onClicked: {
                modelM.append({valor: 100, tipo: 2, tipoIndex: 3});
            }
    
            rect1A.visible: delegateM.rect1Visible
            rect2A.visible: delegateM.rect2Visible
        }
    
        Delegate {
            id: delegateM
        }
    
        Model {
            id: modelM
        }
    }
    

    Delegate.qml

    import QtQuick 2.4
    import QtQuick.Controls 1.2
    import QtQuick.Window 2.2
    
    Item {
        id: delegateItem
    
        property Component delegateComponent: delegateComponent
        property bool rect1Visible: true
        property bool rect2Visible: false
    
        Component {
            id: delegateComponent
    
            Row {
                height: 53
    
                Column {
                    width: 600 * 0.96 / 8 * 6
                    //width: Screen.width * 0.96 / 8 * 6
    
    
                    Text {
                        text: "<strong>" + "Valor: " + valor + "</strong>"
                        font.pixelSize: 16
                    }
                    Text {
                        text: "Tipo: " + tipo
                        font.pixelSize: 16
                    }
                }
    
                Column {
                    width: 600 * 0.96 / 8
                    //width: Screen.width * 0.96 / 8
    
                    Rectangle {
                        color: "grey"
                        width: 50
                        height: 50
                        MouseArea {
                            id: editMouseArea
    
                            anchors.fill: parent
    
                            onClicked:
                            {
                                rect1Visible = true;
                                rect2Visible = false;
                            }
                        }
                    }
    
                }
    
                Column {
                    width: 600 * 0.96 / 8
                    //width: Screen.width * 0.96 / 8
    
                    Rectangle {
                        color: "darkred"
                        width: 50
                        height: 50
                        MouseArea {
                            id: removeMouseArea
    
                            anchors.fill: parent
    
                            onClicked:
                            {
                                rect1Visible = false;
                                rect2Visible = true;
                            }
                        }
                    }
                }
            }
        }
    }
    

    Model.qml

    import QtQuick 2.0
    
    ListModel {
        
    }
    

  • Moderators

    @guidupas You're Welcome :)
    Use ``` (3 backticks) instead of [Code] when posting code here. It follows markdown language syntax. I'll edit it for now.


Log in to reply