qtdeclarative/tests/manual/quickcontrols/nativestyle/CustomButtons.qml

64 lines
1.7 KiB
QML
Raw Permalink Normal View History

// Copyright (C) 2020 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
Native style: copy QStyle from widgets, and implement ground work for creating native styles This is the initial patch for adding native style support to controls2. The gist of the patch is that it copies QStyle from widgets (including the mac plugin style), remove all notions of widgets, tweak it as needed, and make it compile inside the qtquickcontrols2 repository as a separate QML plugin (QtQuick.NativeStyle). The "new" QStyle is then used to draw primitives onto nine-patch-images that can be rendered by the scene graph. Each such primitive/image will be wrapped by a QQuickStyleItem (which is a subclass of QQuickItem). E.g a button background will be implemented by QQuickStyleItemButton.cpp. This item can then be placed anywhere in the QML code to draw a native-looking button background. Controls2 has its own styling API, where a style consist of a set of QML files that extend template controls written in C++. To enable native styling, we simply follow the exact same approach; We create a style folder per platform alongside the other styles in controls2. Each style will contain a set of qml files for the controls (Button.qml, Slider.qml, etc), and inside each control, the style items will be used to draw the default delegates. Since it's likely that each such qml file will be implemented equal in all the desktop styles (but not always), the native style plugin contains a set of default controls (e.g DefaultButton.qml) that a platform style can choose to inherit from and extend as needed. Included is also an example called "DesktopGallery" that can be used to test and view the controls. Change-Id: I8b45aa7d493930f552d3ad2e3e3e7184129a9d6c Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2020-01-20 14:43:39 +00:00
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Native style: copy QStyle from widgets, and implement ground work for creating native styles This is the initial patch for adding native style support to controls2. The gist of the patch is that it copies QStyle from widgets (including the mac plugin style), remove all notions of widgets, tweak it as needed, and make it compile inside the qtquickcontrols2 repository as a separate QML plugin (QtQuick.NativeStyle). The "new" QStyle is then used to draw primitives onto nine-patch-images that can be rendered by the scene graph. Each such primitive/image will be wrapped by a QQuickStyleItem (which is a subclass of QQuickItem). E.g a button background will be implemented by QQuickStyleItemButton.cpp. This item can then be placed anywhere in the QML code to draw a native-looking button background. Controls2 has its own styling API, where a style consist of a set of QML files that extend template controls written in C++. To enable native styling, we simply follow the exact same approach; We create a style folder per platform alongside the other styles in controls2. Each style will contain a set of qml files for the controls (Button.qml, Slider.qml, etc), and inside each control, the style items will be used to draw the default delegates. Since it's likely that each such qml file will be implemented equal in all the desktop styles (but not always), the native style plugin contains a set of default controls (e.g DefaultButton.qml) that a platform style can choose to inherit from and extend as needed. Included is also an example called "DesktopGallery" that can be used to test and view the controls. Change-Id: I8b45aa7d493930f552d3ad2e3e3e7184129a9d6c Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2020-01-20 14:43:39 +00:00
ControlContainer {
id: container
title: "Buttons"
Row {
spacing: container.rowSpacing
Button {
id: buttonWithCustomContentItem
text: "Custom contentItem"
contentItem: Rectangle {
implicitWidth: 120
implicitHeight: il.implicitHeight
color: buttonWithCustomContentItem.pressed ? "green" : "lightGreen"
Text {
id: il
text: buttonWithCustomContentItem.text
anchors.centerIn: parent
}
}
}
Button {
id: cb
text: "Custom background"
background: Rectangle {
implicitWidth: 200
implicitHeight: 30
radius: 5
color: cb.pressed ? "LightGray" : "gray"
}
}
Button {
id: cb2
text: "All custom"
background: Rectangle {
implicitWidth: 200
implicitHeight: 30
radius: 5
color: cb2.pressed ? "LightGray" : "gray"
}
contentItem: Rectangle {
implicitWidth: il2.implicitWidth
implicitHeight: il2.implicitHeight
radius: 3
color: "lightgray"
Text {
id: il2
text: cb2.text
anchors.centerIn: parent
}
}
}
}
}