QML：如何自定义组件并在同一个文件中使用它

Question

Is there some syntax in QML to define and use a component in same file like this?

import QtQuick 2.6
import QtQuick.Window 2.2

var MyButton = Rectangle { width : 100; height : 60; color : "red" } // define it

Window {
    visible: true
    MyButton // use it
}

Answer 1

You can't really use an inline component directly, but you could use a loader:

Component {
  id: btn
  Button { width = 100; height = 60; background = "red" }
}

Loader {
  sourceComponent: btn
}

Another downside is this way you cannot directly specify properties for the created object.

You can also use the component as a delegate for views and repeaters and such.

This is IMO one of the big omissions of QML.

Update: I just noticed this answer a bit out of date. Qt has had inline components for a while. Keep in mind they still have many bugs, there's stuff that will work in a regular component that will not work in an inlined one, especially around inline component properties in other inline components, property aliases and such. If you get some weird behavior, just remember to test it out standalone as well:

component Custom : Item { ...new stuff... }
... in the same source
Custom { }

Also note that it has to be put inside some qml object, it cannot be just a source code global as with JS files.

Answer 2

Powered by @dtech

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Component { id: btn; Rectangle { width : 100; height : 100; color : "red" } }

    Column {
        spacing: 10
        Loader { sourceComponent: btn }
        Loader { sourceComponent: btn; width: 300 }
        Loader { sourceComponent: btn; width: 1000 }
    }
}

And the result: