QT's custom components and dynamic loading

Custom Components

Custom components can be divided into global custom components and inline custom components in the Qml file

Global custom component definition in a separate QML file, the file name is the component name (this is where C + + programmers start to confuse, in fact, Java's file name and class name is also the same), the first letter by default will be converted to uppercase, like item, text and so on.

Customize a component below and change the background color every second, we call it flash flashlight, save as Flashlight.qml

Import QtQuick 2.7
import qtquick.controls 2.0

Rectangle {
    id:flash;

    property int time:1000;
    Radius:10
    width:20
    height:20

    Timer {
        id:timer;
        Interval:time;
        Repeat:true;
        Running:true;
        Triggeredonstart:true;
        Ontriggered: {
            flash.color = Qt.rgba (Math.random (), Math.random (), Math.random (), 1);
        }
    }

    Ontimechanged: {
        timer.interval = time;
    }

    Onradiuschanged: {
        width = radius*2;
        Height = radius*2;
    }
}

The above is a custom component, defined separately in a QML file, it has a top-level element is rectangle, equivalent to inherit from rectangle, so also has all the rectangle properties and methods, in another QML file called it is simple, through its file name can be , as shown below

Import QtQuick 2.7
import qtquick.controls 2.0

Rectangle {
    width:640;
    height:480;
    Color: "#DCDCDC"

    Flashlight {
        anchors.centerIn:parent
        radius:100;
        time:100;
    }
}

Using flashlight directly, as with the use of rectangle, here is set its property radius is 100, time is 100ms change color once, is one of our custom properties, the format of the custom attribute is the property type Name:value

The inline component is equivalent to the concept of an inline class, which can only be used by the current file scope and is generally declared as follows:

Import QtQuick 2.7 Import Qtquick.controls 2.0 Rectangle {width:100;
    height:100;
    Color: "#FFF8DC";

    Radius:10;
    Border.width:10;

    Border.color: "#FAEBD7";
        Component {id:circle;
            Rectangle {width:20;
            height:20;
            Radius:10;
        Color: "#FF0000"}} Loader {id:one;
        Sourcecomponent:circle;
        Anchors.centerIn:parent;
    Visible:true;
        } Loader {id:two;
        Sourcecomponent:circle;
        Anchors.centerIn:parent;
    Visible:false;
        } Loader {id:three;
        Sourcecomponent:circle;
        Anchors.centerIn:parent;
    Visible:false;
        } Loader {id:four;
        Sourcecomponent:circle;
        Anchors.centerIn:parent;
    Visible:false;
        } Loader {id:five;
        Sourcecomponent:circle;
        Anchors.centerIn:parent;
    Visible:false;

}    Loader {id:six;
        Sourcecomponent:circle;
        Anchors.centerIn:parent;
    Visible:false;
        } Property int Num:1 onnumchanged: {one.visible = false;
        Two.visible = false;
        Three.visible = false;
        Four.visible = false;
        Five.visible = false;
        Six.visible = false;
            Switch (num) {case 1:one.visible = true;
        Break
            Case 2:two.visible = true;
        Break
            Case 3:three.visible = true;
        Break
            Case 4:four.visible = true;
        Break
            Case 5:five.visible = true;
        Break
            Case 6:six.visible = true;
        Break
 }
    }
}

Where the ID is circle is an inline component, the inline component is defined as component, given a id,loader is used in a dynamically loaded way, using Sourcecomponent to specify the ID custom attribute

Property Type Name:value

Custom Signal

Sigal name ([Type Arg1,type arg2,...])

dynamically created

In addition to the above to create components with file names and to load components with loader by ID or file path, QT also provides two JS methods to create components

1. Use Qt.createcomponent () to dynamically create a Component object and then use the Component CreateObject () method to create the object
2. Use Qt.createqmlobject () to create an object directly from a QML string

Refer to the Help manual for the parameters and use of these two methods