Seeking Information about Qt Modules that I can't understand from the docs

[Ash V]

Hi there!
I hope you're doing fine :)

I created this simple app wherein I used a QtQuick.Templates Button QML type. But as you can see, it's not rendering.

I later referred to the QtQuick.Templates docs where I found mentioned that QtQuick.Templates are non-visual implementations of QtQuick.Controls.

But, I can't really find a concrete answer to my fundamental question "When to use QtQuick.Controls, and when to use QtQuick.Templates?"

For reference, all the QML types that QtQuick.Controls and QtQuick.Templates provide are the same!

https://doc.qt.io/qt-6/qtquick-controls-qmlmodule.html
https://doc.qt.io/qt-6/qtquick-templates-qmlmodule.html

[Anumas]

Hi,

The answer is pretty simple: only use the templates for property declaration. If you don't, you may get the incompatible type error. The templates are also used to implement themes like Material or Universal theme.

Instead of doing

import QtQuick
import QtQuick.Controls
Item {
    id: root
    property Button myButton: Button {}
}

You must use the Button type provided by the Templates

import QtQuick
import QtQuick.Controls
import QtQuick.Templates as T
Item {
    id: root
    property T.Button myButton: Button {}

And they're used to defining the visual types

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only

import QtQuick
import QtQuick.Templates as T
import QtQuick.Controls.impl
import QtQuick.Controls.Material
import QtQuick.Controls.Material.impl

T.Button {
    id: control

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding)

    topInset: 6
    bottomInset: 6
    verticalPadding: Material.buttonVerticalPadding
    leftPadding: Material.buttonLeftPadding(flat, hasIcon && (display !== AbstractButton.TextOnly))
    rightPadding: Material.buttonRightPadding(flat, hasIcon && (display !== AbstractButton.TextOnly),
                                              (text !== "") && (display !== AbstractButton.IconOnly))
    spacing: 8

    icon.width: 24
    icon.height: 24
    icon.color: !enabled ? Material.hintTextColor :
        (control.flat && control.highlighted) || (control.checked && !control.highlighted) ? Material.accentColor :
        highlighted ? Material.primaryHighlightedTextColor : Material.foreground
...

https://github.com/qt/qtdeclarative/blob/dev/src/quickcontrols/material/Button.qml

And make sure to read this section. It explains why you must use templates when declaring properties: https://doc.qt.io/qt-6/qtquick-controls-qmlmodule.html#using-qt-quick-controls-types-in-property-declarations