Important: Please read the Qt Code of Conduct -

How to use object type properties

  • I am designing my application structure like below. But I cannot use Button type properties shown below.

    I tried to put them there with Loader but it takes source (QUrl) and sourceComponent (QQmlComponent).

    When I try to bind them to loader source I get this error: Unable to assign Button_QMLTYPE_4 to QUrl

    I searched it a lot but I couldnt make it happen. Or i dont know how to search at all :)

    // main.qml
    Page {
        CustomToolbar {
             leftButton: Button {/*properties*/}
             rightButton: Button {/*properties*/}
    // CustomToolbar.qml
    Toolbar {
        property Button leftButton;
        property Button rightButton;
        // Here should be left button
        Title {...}
        // Here should be right button

  • Moderators

    how dynamic should your CustomToolbar be in the end?
    Is it enough for you just to set the Buttons in the very beginning? Or do they get replaced dynamically at some point in your application?

    For the first case (completely untested though):

    // CustomToolbar.qml
    Toolbar {
         id: tb
        property Component leftButton: null
        property Component rightButton: null
        Title {
             id: title
             anchors.horizontalCenter: parent.horizontalCenter
        Component.onCompleted: {
                  // create left button
                 if( leftButton )
                         leftButton.createObject(tb, {"anchors": {left: tb.left});
                  // create right button
                  if( rightButton )
                         rightButton.createObject(tb, {"anchors": {right: tb.right});

  • @maydin in addition to @raven-worx proposal, you may want to take a look at QML Camera example, and check how they (re)using the buttons on the right...

  • @raven-worx It is enough to set Buttons in the very beginning. But this method allows both I guess.

    I realized I need to put title and buttons inside RowLayout in Toolbar. Thats why I wrapped Title inside component and added them to RowLayout dynamically as you show.

    But there may be one more solution. If property is Button instead Component, I can add them to children property of RowLayout with children.push(leftButton) etc.

    Which way is more convenient and why I can define property type as Button, how and where can I use it in future?

  • Moderators

    Yes my example uses Components and creates them when the ToolBar is about to be created.
    You can also use instances of items (Button) directly as you said.

    Which way is more convenient and why I can define property type as Button, how and where can I use it in future?

    i dont understand that question.

  • @raven-worx

    property Button leftButton


    property Component leftButton
    Component.onCompleted: leftButton.createObject(toolbar)

    Which way is better to use? What are advantages or disadvantages in different situations.

  • Moderators

    I think for your case it doesn't make much of a difference.

    Components are used when you want to control the time it will be instantiated or simply use them as a template and reuse them whenever you want.
    Items (like when you declare the type of the property to 'Button') are already instantiated when they get assigned.

Log in to reply