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

Set width and height of objects inside RowLayout and Component



  • 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 }
                            }
                        }
    
    .........
    

  • Moderators

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



  • Great! Fast and correct.
    Thank you very much.


Log in to reply