QML type: Loader

Friendly, friend2022-06-23 18:09:51

One 、 describe

Loader For dynamic loading QML Components .

Loader Can be loaded QML file ( Use source attribute ) or Component object ( Use sourceComponent attribute ). It can be used to delay the creation of components .

The following example is clicking MouseArea When will “Page1.qml” Load as component :

import QtQuick 2.0
Item {
width: 200; height: 200
Loader { id: pageLoader }
MouseArea {
anchors.fill: parent
onClicked: pageLoader.source = "Page1.qml"
}
}

have access to item Property to access the loaded object .

If source  or sourceComponent  A change has taken place , Any previously instantiated items will be destroyed .

take source Set to an empty string or set sourceComponent Set to undefined The currently loaded object will be destroyed , Release resources and Loader empty .

1.1、 Loader sizing behavior

If the source component is not Item type ,Loader No special sizing rules apply . When used to load types with visual effects ,Loader Apply the following size rules :

  • If not for Loader Specify explicit size , After loading the component ,Loader Will automatically resize to the size of the add in .
  • If you set the width 、 Height or anchoring to specify Loader Size , The loaded project will be adjusted to Loader Size .

In the following two cases , The size of the project and the loader are the same . This ensures that anchoring to the loader is equivalent to anchoring to the loaded project .

1.2、 Receive a signal from the load object

have access to Connections Type receives any signal from the loaded object :

import QtQuick
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Item {
width: 200; height: 200
Loader {
id: myLoader
sourceComponent: rect
}
Connections
{
target: myLoader.item
function onMessage(msg) { console.log(msg) }
}
Component {
id: rect
Rectangle {
id: myItem
signal message(string msg)
width: 100; height: 100
MouseArea {
anchors.fill: parent
onClicked: myItem.message(" Press down ")
}
}
}
}
}

The loaded object can also directly call Loader Or any function defined in its parent :

import QtQuick
Window {
id:root
width: 640
height: 480
visible: true
title: qsTr("Hello World")
function fun03() { console.log("fun03") }
Item {
id:loader_parent
width: 200; height: 200
function fun02() { console.log("fun02") }
Loader {
id: myLoader
sourceComponent: rect
function fun01() { console.log("fun01") }
}
Component {
id: rect
Rectangle {
id: myItem
signal message(string msg)
width: 100; height: 100
MouseArea {
anchors.fill: parent
onClicked:
{
myLoader.fun01()
loader_parent.fun02()
root.fun03()
}
}
}
}
}
}

1.3、 Focus and key events

Loader Is a focus scope . its focus Property must be set to true.

import QtQuick
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Item {
id:loader_parent
width: 200; height: 200
Loader {
id: myLoader
sourceComponent: rect
focus: true
}
Keys.onPressed: (event)=>
{
console.log(" Loaded assembly - give up - Capture keyboard press event ");//01
}
Component {
id: rect
Item
{
Item
{
focus: true
Keys.onPressed: (event)=>
{
console.log(" The loaded assembly receives a keyboard press event ");//02
event.accepted = true;
}
}
}
}
}
}

The above code : 

  • Loaded assemblies and  Loader Set... At the same time focus by true, Only the loaded assembly can receive the keyboard press event . Print 02.
  • Loaded assembly settings  focus by false,Loader Set up  focus by true Then print 01

1.4、 Use... In view delegates Loader

Use... In view delegates Loader It can improve the performance of delegate loading . But pay attention to the correct usage .

An ordinary Commission :

When using  Loader  External components cannot reference index

The right way to use :

or :

Two 、 Attribute members

1、active : bool

Loader Is currently active . The default is true.

If Loader Inactive , Then change source  or sourceComponent Does not cause the project to be instantiated , until Loader Active .

Inactive loader status  Always be Loader.Null.

2、asynchronous : bool

Whether the component will be instantiated asynchronously . The default is false.

When and source When used in combination with properties , Loading and compiling will also be performed in the background thread .

3、【 read-only 】item: QtObject

Currently loaded top-level object .

4、progress : real

Load from network QML Data progress , from 0.0( Not loaded ) To 1.0( Completed ). majority QML The files are very small , Therefore, the value will quickly change from 0 Turn into 1.

5、source : url

To instantiate QML Component's URL.

To unload the currently loaded object , Set this property to an empty string , Or will sourceComponent Set to undefined. take source Set as new URL It will also lead to the previous URL The created project is unloaded .

6、sourceComponent : Component

Components to instantiate . To unload the currently loaded object , Set this property to undefined.

Item {
Component {
id: redSquare
Rectangle { color: "red"; width: 10; height: 10 }
}
Loader { sourceComponent: redSquare }
Loader { sourceComponent: redSquare; x: 10 }
}

7、status : enumeration

QML Loaded status .

  • Loader.Null: Loader is inactive or not set QML Source
  • Loader.Ready:QML Source code loaded
  • Loader.Loading: Currently loading QML Source
  • Loader.Error: load QML Error in source

3、 ... and 、 Signal member

1、loaded()

When the status changes to Loader.Ready Or send this signal when the initial load is successful .

Four 、 Member functions

1、object setSource(url source, object properties)

Create an object instance of a given source component with a given property .properties Parameters are optional . After loading and instantiation , Can pass item Property to access the instance .

If when this function is called active The attribute is false, The given source component will not be loaded , But it caches the source and initial attributes . When the loader is active , An instance of the source component will be created using the initial property set .

Setting the initial property value of a component instance in this way does not trigger any associated behavior ( For example, attribute animation ).

If you change the source or source component after calling this function but before setting the loader to activate , The cached properties will be cleared .


thank
Similar articles

2022-06-23