Set width and height of objects inside RowLayout and Component

[davidino]

Goodmorning,
I'm having some difficulties on set the height and width of some Images which are placed inside a RowLayout and Component., below there is the code.

Inside RowLayout id: navigation, I tried with "width" and "height" properties for id: home and id:back, but unsuccessfully. The images are displayed with their original sizes.

Inside Component id: filedelegate, the image id:speaker has got the same problem while id: icon, which is a quite big image.

How can I set dimensions as I want inside Component and RowLayout objects?
Thank you.

.........

    ListView
    {
        id: lista
        anchors.leftMargin: 105
        width: parent.width
        height: parent.height
        model: folderModel
        delegate: fileDelegate
        header: navigation

        Component{
            id: navigation
            RowLayout
            {
                Image
                {
                    id: home
                    height: 48
                    width: 48
                    source:"qrc:/res/icons/Home-icon.png"
                    MouseArea
                    {
                        anchors.fill: parent
                        onReleased: {items.folder = items.rootFolder;}
                    }
                }

                Image
                {
                    id: back
                    height: 48
                    width: 48
                    source: "qrc:/res/icons/Back-icon.png"
                    MouseArea
                    {
                        anchors.fill: parent
                        onReleased: {if(items.folder!==items.rootFolder) items.folder=items.parentFolder;}
                    }
                }
            }
        }

        Component
        {
            id: fileDelegate
            Rectangle
            {
                id: listaElemento
                width: parent.width - 110
                height: 48
                color:playArea.pressed?afterPressColor:beforePressColor
                border.color: "BLACK"
                border.width: 2
                radius: 25
                readonly property color beforePressColor: "LightBlue"
                readonly property color afterPressColor: "Green"

                RowLayout
                {
                    Image
                    {
                        id: icon;
                        Layout.leftMargin: 15;
                        source: folderModel.isFolder(index) ? "qrc:/res/icons/folder.png" : "qrc:/res/icons/music.png";
                    }

                    Text { id: name; text: fileName; }


                    Image {
                        id: speaker
                        source: "qrc:/icons/lowVolume.png"
                        state: "lowVol"
                        height: 48
                        width: 48

                        visible: (index==2)//mediaPlayer.source === folderModel.get(index,"fileURL")

                        Timer {
                            id: zen
                            interval: 1000
                            running: (index==2)//(speaker.visible) & (MediaPlayer.Buffering===mediaPlayer.playbackState)
                            repeat: true
                            onTriggered:
                            {
                                switch(speaker.state)
                                {
                                    case "lowVol":
                                        speaker.state="mediumVol";
                                        break;
                                    case "mediumVol":
                                        speaker.state="highVol";
                                        break;
                                    case "highVol":
                                        speaker.state="lowVol";
                                        break;
                                    default:
                                        break;
                                }
                                console.log(speaker.state)
                            }
                        }

                        states:
                            [
                            State {
                                name: "lowVol"
                                PropertyChanges { target: speaker; source: "qrc:/icons/lowVolume.png"}
                            },
                            State{
                                name: "mediumVol"
                                PropertyChanges { target: speaker; source: "qrc:/icons/mediumVolume.png"}
                            },
                            State{
                                name: "highVol"
                                PropertyChanges { target: speaker; source: "qrc:/icons/highVolume.png"}
                            }]

                        transitions: Transition {
                            NumberAnimation { properties: "source"; duration: 100; easing.type: Easing.InOutQuad }
                        }
                    }

.........

[raven-worx]

@davidino
you need to sett the image's sourceSize property

[davidino]

Great! Fast and correct.
Thank you very much.