Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Set width and height of objects inside RowLayout and Component
Forum Updated to NodeBB v4.3 + New Features

Set width and height of objects inside RowLayout and Component

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 724 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    davidino
    wrote on last edited by davidino
    #1

    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-worxR 1 Reply Last reply
    0
    • D 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-worxR Offline
      raven-worxR Offline
      raven-worx
      Moderators
      wrote on last edited by
      #2

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

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      1 Reply Last reply
      3
      • D Offline
        D Offline
        davidino
        wrote on last edited by
        #3

        Great! Fast and correct.
        Thank you very much.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved