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. Custom component with default content
Forum Update on Monday, May 27th 2025

Custom component with default content

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
5 Posts 3 Posters 521 Views
  • 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.
  • T Offline
    T Offline
    Tim T
    wrote on 20 Jan 2022, 20:26 last edited by
    #1

    Is there a way to give a custom component, default content, that can be optionally overridden? Using the default property seems to add to the list of children and not replace them.

    Some pseudo code:

    // customBox.qml
    Rectangle {
        id: root
    
        property alias content: root.children
    
        Text {
            id: defaultText
            text: "My default text"
        }
    }
    
    // main.qml
    ...
    customBox {
        id: boxWithReplacedContent
        content: Rectangle {
            color: "blue"
        }
    
    customBox {
        id: boxWithDefaultContent
    }
    ...
    

    What I would like is the Text object in "customBox" to be replaced by a blue rectangle in "boxWithReplacedContent". When I don't specify anything in the "content" property, like in "boxWithDefaultContent", I would like the "defaultText" object to be displayed. As it works now the blue rectangle will be added to the list of children rather than replacing the "defaultText" object.

    Tim

    1 Reply Last reply
    0
    • F Offline
      F Offline
      fcarney
      wrote on 20 Jan 2022, 22:05 last edited by
      #2

      Maybe assume the default number of children is 1.
      Then check this and change visibility?

      Rectangle {
          id: root
      
          property alias content: root.children
      
          Text {
              id: defaultText
      
              visible: root.children.length <= 1
      
              text: "My default text"
          }
      }
      

      C++ is a perfectly valid school of magic.

      1 Reply Last reply
      0
      • L Offline
        L Offline
        lemons
        wrote on 21 Jan 2022, 10:25 last edited by
        #3

        Your example should be working, but you should add default sizing (with/height), so it will be visible. Also you might have to set width and height of your root rectangle to childrenRect.width / childrenRect.height. Depends on the usage.

        customBox {
            id: boxWithReplacedContent
            content: Rectangle {
                width: 200
                height: 100
                color: "blue"
            }
        }
        
        Rectangle {
            id: root
            width: childrenRect.width
            height: childrenRect.height
            
            property alias content: root.children
        
            Text {
                id: defaultText
                text: "My default text"
            }
        }
        
        T 1 Reply Last reply 9 Mar 2022, 23:03
        0
        • L lemons
          21 Jan 2022, 10:25

          Your example should be working, but you should add default sizing (with/height), so it will be visible. Also you might have to set width and height of your root rectangle to childrenRect.width / childrenRect.height. Depends on the usage.

          customBox {
              id: boxWithReplacedContent
              content: Rectangle {
                  width: 200
                  height: 100
                  color: "blue"
              }
          }
          
          Rectangle {
              id: root
              width: childrenRect.width
              height: childrenRect.height
              
              property alias content: root.children
          
              Text {
                  id: defaultText
                  text: "My default text"
              }
          }
          
          T Offline
          T Offline
          Tim T
          wrote on 9 Mar 2022, 23:03 last edited by
          #4

          @lemons Unfortunately, this still has the same problem where the blue rectangle is added to the list of children rather than replacing it. With the example you gave it appears to be working because the blue rectangle covers the default text. If you make the rectangle really small like 20 x 20 you will see them both on top of each other.

          L 1 Reply Last reply 11 Mar 2022, 14:16
          0
          • T Tim T
            9 Mar 2022, 23:03

            @lemons Unfortunately, this still has the same problem where the blue rectangle is added to the list of children rather than replacing it. With the example you gave it appears to be working because the blue rectangle covers the default text. If you make the rectangle really small like 20 x 20 you will see them both on top of each other.

            L Offline
            L Offline
            lemons
            wrote on 11 Mar 2022, 14:16 last edited by
            #5

            @Tim-T yes you are right. this should work:

            Rectangle {
                id: root
            
                property alias content: root.children
            
                width: childrenRect.width
                height: childrenRect.height
            
                Component {
                    id: defaultComponent
                    Text {
                        text: "My default text"
                    }
                }
            
                Component.onCompleted: {
                    if (root.children.length === 0)
                        defaultComponent.createObject(root)
                }
            }
            
            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