How to use the default attribute in QML language

How to use the default attribute in QML language

When we look at the QML code, we may often see the default default property with property . What is the use of this attribute? In today's routine, let's explain it in detail.

\

According to the introduction of the QML language, any QML object has one and only one default attribute. In the English article, the specific description is as follows:

\

An object definition can have a single default property. A default property is the property to which a value is assigned if an object is declared within another object's definition without declaring it as a value for a particular property.\

\

The focus here is on Object . It's hard to understand, so let's make an example.

\

CustomButton.qml

\

import QtQuick 2.0

Item {
    id:root
    property string text: "Label"
    width: 100
    height: 32


    Item{
        id: container
        anchors.fill: parent
    }

    Column {
        anchors.centerIn: parent
        spacing: units.gu(2)

        Text {
            id: label
            text: root.text
        }
    }
}
 


\

This is a Component used to display a text. We can use it in our Main.qml:

\

Main.qml

\

        CustomButton{
            anchors.centerIn: parent
            width: units.gu(30)
            height: units.gu(20)

            text: "Hello, the world!"

            Rectangle{
                          anchors.fill: parent
                           color:"red"
                       }
        }
    }
 

\

\

Run our code:

\

\

\

We can see that we did not see the "Hello, the world!" that we wanted to see in our code. This is because our following code covers the entire area:

\

            Rectangle{
                anchors.fill: parent
                color:"red"
            }
 



In order to realize that we can draw a red bottom on the bottom, and then write our words on top. We make the following changes to our CustomButton.qml:

\

CustomButton.qml

\

import QtQuick 2.0

Item {
    id:root
    property string text: "Label"
    property alias content:container.children;
    width: 100
    height: 32


    Item{
        id: container
        anchors.fill: parent
    }

    Column {
        anchors.centerIn: parent
        spacing: units.gu(2)

        Text {
            id: label
            text: root.text
        }
    }
}
 

\

Here, we define an attribute content. It is pointed to container.children in our Component. In our Main.qml, we also re-modify our application:

\

\

Main.qml

\

        CustomButton{
            anchors.centerIn: parent
            width: units.gu(30)
            height: units.gu(20)

            text: "Hello, the world!"

            content: [
                Rectangle{
                    anchors.fill: parent
                    color:"red"
                }
            ]

        }
 


After this transformation, we re-run our application:

\

\

\

\

Obviously this time we saw the results we hoped for. In the red background, the text we hoped "Hello, the world!" is displayed.

\

\

Up to the present position, we have not used our default attribute. We can further modify our CustomButtom.qml as follows:

\

\

CustomButtom.qml

\

import QtQuick 2.0

Item {
    id:root
    property string text: "Label"
    default property alias content:container.children;
    width: 100
    height: 32


    Item{
        id: container
        anchors.fill: parent
    }

    Column {
        anchors.centerIn: parent
        spacing: units.gu(2)

        Text {
            id: label
            text: root.text
        }
    }
}
 


Obviously, we use a default attribute default keyword, so in our application Main.qml, we can rewrite our code as follows:

\

Main.qml

\

        CustomButton{
            anchors.centerIn: parent
            width: units.gu(30)
            height: units.gu(20)

            text: "Hello, the world!"

            Rectangle{
                anchors.fill: parent
                color:"red"
            }
        }
 


Obviously, there is no such complicated wording as content, but we re-run our application:

\

\

\

Obviously got the result we wanted. The result of the first run above is completely different (there is no text in the first run). This shows that our Rectangle is directly assigned to the content in our CustomButtom and can be displayed.

\

\

The source code of the entire project is at: github.com/liu-xiao-gu...

\