QML Tips （持续更新...）

typeof

typeof (qmlelement) typeof 会将QML element作为类型，返回一个object。
https://stackoverflow.com/questions/13923794/how-to-do-a-is-a-typeof-or-instanceof-in-qml

Math.floor()

The Math.floor function returns the largest integer less than or equal to a given number

console.log(Math.floor(5.95));
// expected output: 5
console.log(Math.floor(5.05));
// expected output: 5
console.log(Math.floor(5));
// expected output: 5
console.log(Math.floor(-5.05));
// expected output: -6
> 5
> 5
> 5
> -6

Image

QML Image fillMode

• Image.Stretch(default) - the image is scaled to fit

• Image.PreserveAspectFit - the image is scaled uniformly to fit without cropping

• Image.PreserveAspectCrop - the image is scaled uniformly to fill, cropping if necessary

• Image.Tile - the image is duplicated horizontally and vertically

• Image.TileVertically - the image is stretched horizontally and tiled vertically

• Image.TileHorizontally - the image is stretched vertically and tiled horizontally

• Image.Pad - the image is not transformed

Syntax:

Image {
    width: 130; height: 100
  fillMode: xxx
  source: "qtlogo.png"
}

Text

elide: enumeration

Set this property to elide parts of the text fit to the Text item’s width. The text will only elide if an explicit width has been set.
This property cannot be used with rich text.

• Text.ElideNone - the default
• Text.ElideLeft
• Text.ElideMiddle
• Text.ElideRight

If this property is set to Text.ElideRight, it can be used with wrapped text. The text will only elide if maximumLineCount, or height has been set. If both maximumLineCount and height are set, maximumLineCount will apply unless the lines do not fit in the height allowed.
If the text is a multi-length string, and the mode is not Text.ElideNone, the first string that fits will be used, otherwise the last will be elided.
Multi-length strings are ordered from longest to shortest, separated by the Unicode “String Terminator” character U009C (write this in QML with "\u009C" or "\x9C").

wrapMode: enumeration

Set this property to wrap the text to the Text item’s width. The text will only wrap if an explicit width has been set. wrapMode can be one of:

• Text.NoWrap (default) - no wrapping will be performed. If the text contains insufficient newlines, then contentWidth will exceed a set width.
• Text.WordWrap - wrapping is done on word boundaries only. If a word is too long, contentWidth will exceed a set width.
• Text.WrapAnywhere - wrapping is done at any point on a line, even if it occurs in the middle of a word.
• Text.Wrap - if possible, wrapping occurs at a word boundary; otherwise it will occur at the appropriate point on the line, even in the middle of a word.

  Loader

If the source or sourceComponent changes, any previously instantiated items are destroyed. Setting source to an empty string or setting sourceComponent to undefined destroys the currently loaded object, freeing resources and leaving the Loader empty.

Loader QML Tyoe allow dynamic loading of a subtree from a URL or Compinent

Loader can load a QML file (using the source property) or a Component object (using the sourceComponent property). It is useful for delaying the creation of a component until it is required: for example, when a component should be created on demand, or when a component should not be created unnecessarily for performance reasons.

//Here is a Loader that loads "Page1.qml" as a component when the MouseArea is clicked:
import QtQuick 2.0
Item {
    width: 200; height: 200
    Loader { id: pageLoader }
    MouseArea {
        anchors.fill: parent
        onClicked: pageLoader.source = "Page1.qml"
    }
}

Component

Components are reusable, encapsulated QML types with well-defined interfaces.

Components are often defined by component files - that is, .qml files. The Component type essentially allows QML components to be defined inline, within a QML document, rather than as a separate QML file. This may be useful for reusing a small component within a QML file, or for defining a component that logically belongs with other QML components within a file.

//For example, here is a component that is used by multiple Loader objects. It contains a single item, a Rectangle:
import QtQuick 2.0
Item {
    width: 100; height: 100
    Component {
        id: redSquare
        Rectangle {
            color: "red"
            width: 10
            height: 10
        }
    }
    Loader { sourceComponent: redSquare }
    Loader { sourceComponent: redSquare; x: 20 }
}

The component encapsulates the QML types within, as if they were defined in a separate QML file, and is not loaded until requested (in this case, by the two Loader objects). Because Component is not derived from Item, you cannot anchor anything to it.

component尽在需要时才会去加载文件。

Repeater

The Repeater type is used to create a large number of similar items. Like other view types, a Repeater has a model and a delegate: for each entry in the model, the delegate is instantiated in a context seeded with data from the model. A Repeater item is usually enclosed in a positioner type such as Row or Column to visually position the multiple delegate items created by the Repeater.
Repeater通常和Row或是Column一起使用

import QtQuick 2.0
Row {
    Repeater {
        model: 3
        Rectangle {
            width: 100; height: 40
            border.width: 1
            color: "yellow"
        }
    }
}

delegate：Component

Column {
    Repeater {
        model: 10
        Text { text: "I'm item " + index }
    }
}

Animator QML Type

Animator types are a special type of animation which operate directly on Qt Quick’s scene graph, rather than the QML objects and their properties like regular Animation types do. This has the benefit that Animator based animations can animate on the scene graph’s rendering thread even when the UI thread is blocked.