ColorDialog color dialog summary
I. Overview
ColorDialog is the standard color dialog provided by Qt. ColorDialog allows the user to select a color.
The dialog is initially invisible. You need to first set the property as desired, then set visible to true or call open().
Here's a minimal example that opens a color dialog and exits after the user selects a color:
import QtQuick 2.2
import QtQuick.Dialogs 1.0
ColorDialog {
id: colorDialog
title: "Please choose a color"
onAccepted: {
console.log("You chose: " + colorDialog.color)
Qt.quit()
}
onRejected: {
console.log("Canceled")
Qt.quit()
}
Component.onCompleted: visible = true
}
A colored dialog window is automatically transient with respect to its parent window . So, whether you declare the dialog in the project or in the window, the dialog will be displayed in the center of the window containing the project or the window you declare it in.
Second, the main points of realization
ColorDialog will initially be a platform color dialog, and if something goes wrong, it will attempt to instantiate a QColorDialog. If initializing a QColorDialog also fails, then it will fall back to a QML implementation, DefaultColorDialog.qml.
In this case, you can customize the appearance by editing this file. DefaultColorDialog. The qml contains a rectangle to hold the content of the dialog, because some embedded systems do not support multiple top-level windows. When the dialog becomes visible, it will automatically wrap in a window, simply re-parenting it on top of the main window if there can only be one.
ColorDialog is a modal top dialog box, but we set it as a non-modal box state.
3. Collection of some examples
1. Click the button to modify the button text color
Example code:
import QtQuick 2.2
import QtQuick.Dialogs 1.0
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Button{
anchors.centerIn: parent
onClicked: {
colorDialog.open();
}
Label{
id:logo
text: "选择颜色"
anchors.centerIn: parent
}
ColorDialog {
id: colorDialog
title: "Please choose a color"
onAccepted: {
console.log("You chose: " + colorDialog.color)
logo.color = colorDialog.color
}
onRejected: {
console.log("Canceled")
}
}
}
}