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. [solved] How do I attach properties to a Component?
Forum Updated to NodeBB v4.3 + New Features

[solved] How do I attach properties to a Component?

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 2 Posters 4.1k 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.
  • K Offline
    K Offline
    Kysymys
    wrote on last edited by
    #1

    Hi there,

    I am trying to understand the Component objects. So I've written two .qml files. Container.qml, which is a Rectangle that displays an arbitrary object (aThing). The other file (main.qml) is the application, which uses 'Container' to display the object that is defined within main.qml.

    Now to my question: how do I attach properties (pass information) form from 'Container' to 'aThing'?

    main.qml:
    @import QtQuick 2.0

    Rectangle {
    width: 360; height: 360
    color: "aliceblue"

    Rectangle {
        anchors.centerIn: parent
        width: 300; height: 300
        border {color: "black"; width: 1 }
    
        Container {
            id: container
            anchors.margins: 1
    
            aThing: Rectangle {
                width: 50; height: 50;
                
                // I know, this does not work. But how can I get Component.qml 
                // to pass information to this 'aThing'
                color: Qt.darker(container.theColor, .5)
            }
        }
    }
    

    }@

    Container.qml:
    @import QtQuick 2.0

    Rectangle {
    property color theColor: "lightsteelblue"
    property Component aThing: idDefaultComponent

    Component {
        id: idDefaultComponent
        Rectangle { width: 100; height: 100; color: "red" }
    }
    
    anchors.fill: parent
    color: theColor
    
    Loader {
        id: thing
        anchors.centerIn: parent
        sourceComponent: aThing
    }
    

    }@

    \o/ \o/ Kudos ...

    Paholaisen Kysymys

    1 Reply Last reply
    0
    • K Offline
      K Offline
      Kysymys
      wrote on last edited by
      #2

      Yay! Found the solution.

      It's actually pretty simple.
      When creating an object with Loader you can add properties the same way you do with all other objects.
      @Loader {
      property color aNewProperty: "#ff8080"
      sourceComponent: theComponentToCreate
      }@

      I wish this had been mentioned in the documentation to the Loader Element.

      To be complete, here are the working sources.

      main.qml:
      @import QtQuick 2.0

      Rectangle {
      width: 360; height: 360
      color: "aliceblue"

      Rectangle {
          anchors.centerIn: parent
          width: 300; height: 300
          border {color: "black"; width: 1 }
      
          Container {
              anchors.margins: 1
      
              aThing: Rectangle {
                  width: 100; height: 100;
                  color: Qt.darker(parentColor, 1.5)
      
                  border.color: "black"
                  border.width: 1
              }
          }
      }
      

      }
      @

      Container.qml:
      @import QtQuick 2.0

      Rectangle {
      id: root

      property color theColor: "lightsteelblue"
      property Component aThing: Item { }
      
      anchors.fill: parent
      color: theColor
      
      Loader {
          property color parentColor: root.theColor
          anchors.centerIn: parent
      
          sourceComponent: aThing
      }
      

      }
      @

      Kudos to myself.

      \o/ \o/ Kudos ...

      Paholaisen Kysymys

      1 Reply Last reply
      0
      • C Offline
        C Offline
        chrisadams
        wrote on last edited by
        #3

        Hi,

        I'm glad you found a solution! Just for information purposes, however, I'd like to explain what's actually going on here: basically, the "parentColor" property you've defined is actually a dynamic property of the Loader. When the expression "Qt.darker(parentColor, 1.5)" is evaluated in the child object, the property resolution code will "walk up the scope chain" to find the symbol - and it will resolve to the property of the Loader.

        Another (more direct) way of achieving this, is to instantiate the object passing an "initial property values" map, as documented in QQmlComponent etc.

        Cheers,
        Chris.

        1 Reply Last reply
        0
        • K Offline
          K Offline
          Kysymys
          wrote on last edited by
          #4

          Thank you for your input Chris,

          the point about this post, as hinted in the title, is to pass information from the place where the Loader Element is used to instantiate an arbitrary object, to the created object. The information passed, serves no deeper purpose then to be passed.

          It seems I've chosen a confusing example. Sorry about that.
          Maybe this will clarify:

          main.qml
          @import QtQuick 2.0

          Rectangle {
          width: 360; height: 360
          color: "aliceblue"

          Rectangle {
              anchors.centerIn: parent
              width: 300; height: 300
              border {color: "black"; width: 1 }
          
              Container {
                  anchors.margins: 1
          
                  aThing: Rectangle {
                      width: 200; height: 200;
                      border {color: "black"; width: 1 }
          
                      Text {
                          anchors.fill: parent; anchors.margins: 3;
                          text: passedInformation
                          wrapMode: Text.WordWrap
                      }
                  }
              }
          }
          

          }
          @

          Container.qml:
          @import QtQuick 2.0

          Rectangle {
          id: root

          property Component aThing: Item { }
          
          anchors.fill: parent
          color: "lightsteelblue"
          
          Loader {
              property string passedInformation: "some arbitrary information"
              anchors.centerIn: parent
          
              sourceComponent: aThing
          }
          

          }
          @

          \o/ \o/ Kudos ...

          Paholaisen Kysymys

          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