Rosen's QT journey 100 QML four standard dialog boxes (color, font, file, promotion)

A complete application usually needs to use dialog boxes to complete some interactions . Some dialog boxes provide some general functions , For example, select a file 、 Choose colors, etc . Because this part of the dialog box is the same for every program ,QML Provides a series of predefined dialog boxes , It is called a standard dialog . stay QML in , Using the standard dialog box requires importing Dialogs modular :

import QtQuick. Dialogs 1.1

The module provides 4 A standard dialog :ColorDialog、FileDialog、FontDialog and MessageDialog. Let's introduce one by one .

Color dialog

ColorDialog Corresponding Widgets Medium QColorDialog, Dialog box for color selection . In the initial state , The dialog is invisible , You need to set its properties first , And then take it. visible Property is set to true, Or call open() function .
ColorDialog Dialog box that automatically acts as its parent window , Therefore, it is usually displayed in the center of the parent window . As long as the platform supports ,ColorDialog Will use the platform's own color dialog ; otherwise , ColorDialog Will initialize a QColorDialog Display . If even QColorDialog Cannot initialize ,ColorDialog Will display a QML The implementation of the DefaultColorDialog. qml. under these circumstances , By editing the DefaultCol-orDialog.qml You can customize ColorDialog The appearance of the .DefaultColorDialog.qml Contains a for storing the contents of the dialog Rectangle Components , This is to avoid that some embedded systems do not support multiple top-level windows . When the dialog box is visible , If possible , DefaultColorDialog.qml Will be embedded in a Win-dow in ; If the underlying platform only supports one top-level window , In this case , Because the main window is already a top-level window , So the color dialog can no longer become another top-level window , therefore ,QML Choose to re render it in the main window .

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2

Window {
    id:window
    visible: true
    width: 200
    height: 200
    title: qsTr("Hello World")

    Button{
        text: qsTr("Open Color Dialog")
        onClicked:colorDialog.open()
    }

    ColorDialog{
        id:colorDialog
        title:qsTr("select color")
        onAccepted: window.color = color // Click on ok Execute after button 
        onRejected: console.log("cilcked cancel")  // Click on cancle Execute after button 
    }
}

Font selection dialog box

FontDialog Corresponding Widgets Medium QFontDialog, Dialog box for font selection , Similar to the previous dialog types .FontDialog Types can be used in open() before , Use font Property to set the initial font , When the dialog box is closed , have access to font To get the selected font type .

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2

Window {
    id:window
    visible: true
    width: 200
    height: 200
    title: qsTr("Hello World")

    Button{
        text: qsTr("Open Font Dialog")
        onClicked:fontDialog.open()
    }

    FontDialog{
        id:fontDialog
        title:qsTr("select font")
        font:Qt.font({family:"Arial",pointSize:24,weight:Font.Normal})
        onAccepted: console.log("selected font is" + fontDialog.font) // Click on ok Execute after button 
        onRejected: console.log("cilcked cancel")  // Click on cancle Execute after button 
    }
}

File selection dialog

FileDialog Corresponding Widgets Medium QFileDialog, Used to display a dialog box for selecting files . Same as ColorDialog similar , In the initial state , FileDialog It's also invisible . Set some related properties before using , And then take it. visible Property is set to true, Or call open function .FileDialog Other features are similar ColorDialog, No more details here .

Selected file or file list ( When multiple files are selected ) The path can be through fileUrl or fileUrls To get , If you want to select multiple files , Need to set up selectMultiple The attribute is true. If you want to choose a directory instead of a file , You can set selectFolder by true, And then through folder Property to get the selected directory path . If you're calling open() Previously set folder attribute , Then the specified directory will be opened . You can also use nameFilters To set the file name filter , Filters can be used ? and * wildcard , Each string is separated by a space .

Prompt message box

MessageDialog Corresponding C＋＋ Medium QMessageBox, Standard dialog box for displaying some prompt information , Like a warning 、 Errors, etc . And QMessageBox It provides many convenient static functions , Here you need to set one by one MessageDialog Properties of , In order to achieve the desired effect .
Use text Property can set the main displayed content , Use detailedText Property to set the details to be displayed .icon Property is used to set the icon of the dialog , Altogether 5 Kind of :StandardIcon.NoIcon( No icons )、StandardIcon.Question( problem )、StandardIcon.Information( Information )、StandardIcon.Warning( Warning )、StandardIcon. Critical( error ). Use standardButtons Property to set the buttons in the dialog . Each button contains a ButtonRole, Used to determine the type of signal emitted when the button is pressed , for example Ok The button corresponds to AcceptRole, that Ok When the button is pressed, it should be in onAccepted() Perform corresponding operations in the signal processor ; and Help The button corresponds to HelpRole, Then the corresponding is onHelp() Signal processor .

MessageDialog Standard button types in

The name of the button	describe
StandardButton.Ok	Use AcceptRole Defined OK Button
StandardButton.Open	Use AcceptRole Defined Open Button
StandardButton.Save	Use AcceptRole Defined Save Button
StandardButton.Cancel	Use RejectRole Defined Cancel Button
StandardButton.Close	Use RejectRole Defined Close Button
StandardButton.Discard	Use DestructiveRole Defined Discard or Don't Save Button
StandardButton.Apply	Use ApplyRole Defined Apply Button
StandardButton.Reset	Use ResetRole Defined Reset Button
StandardButton.RestoreDefaults	Use ResetRole Defined Restore Defaults Button
StandardButton.Help	Use HelpRole Defined Help Button
StandardButton.SaveAll	Use AcceptRole Defined SaveAll Button
StandardButton.Yes	Use YesRole Defined Yes Button
StandardButton.YesToAll	Use YesRole Defined Yes to All Button
StandardButton.No	Use NoRole Defined No Button
StandardButton. NoToAll	Use NoRole Defined No to All Button
StandardButton.Abort	Use RejectRole Defined Abort Button
StandardButton.Retry	Use AcceptRole Defined Retry Button
StandardButton.Ignore	Use AcceptRole Defined Ignore Button