Qt Quick - Dialog

I. Overview

Dialogs are a type of popup dialog that are primarily used for short-term tasks and brief communications with the user. Similar to ApplicationWindow and Page, Dialog is organized into three parts: header, contenttem and footer.

2. Dialog box title and button

The dialog's title is shown by a style-specific title bar, which by default is designated as the dialog's title.
The dialog's standard buttons are managed by a DialogButtonBox, which by default is designated as the dialog footer. The standardButtons property of the dialog is forwarded to the corresponding property of the button box. Also, the accepted() and rejected() signals of the button box are connected to the corresponding signals in the dialog. To open this dialog box, just use the open() function.

    Button{
    
    
        x: 270
        y: 184
        text: "点击";
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        onClicked: {
    
    
            dialog.open()
        }
    }

  Dialog {
    
    
      id: dialog
      title: "Title"
      standardButtons: Dialog.Ok | Dialog.Cancel

      onAccepted: console.log("Ok clicked")
      onRejected: console.log("Cancel clicked")
  }

Three, modal dialog box

Modal dialogs block input to other content below the dialog. When a modal dialog is opened, the user must finish interacting with the dialog and close it before they can access any other content in the same window. In fact, just set the modal attribute

  Dialog {
    
    
      id: dialog
      modal: true
      standardButtons: Dialog.Ok
  }

Fourth, the non-modal dialog box

Modeless dialogs are dialogs that operate independently of other content surrounding the dialog. When opening a modeless dialog, the user can interact with the dialog and other content in the same window.

  Dialog {
    
    
      id: dialog
      modal: false
      standardButtons: Dialog.Ok
  }

Five, standardButtons attribute

This property contains the combination of standard buttons used by the dialog.

  Dialog {
    
    
      id: dialog
      title: "Title"
      standardButtons: Dialog.Ok | Dialog.Cancel

      onAccepted: console.log("Ok clicked")
      onRejected: console.log("Cancel clicked")
  }

The buttons will be placed in the proper order based on the user's system platform.

the sign	meaning
Dialog.Ok	"OK" button defined with AcceptRole.
Dialog.Open	"Open" button defined with AcceptRole.
Dialog.Save	"Save" button defined with AcceptRole.
Dialog.Cancel	"Cancel" button defined with RejectRole.
Dialog.Close	"Close" button defined with RejectRole.
Dialog.Discard	A "Destroy" or "Don't Save" button defined by DestructiveRole, depending on the platform.
Dialog.Apply	The "Apply" button defined by ApplyRole.
Dialog.Reset	"Reset" button defined with ResetRole.
Dialog.RestoreDefaults	Use the "Restore Defaults" button defined by ResetRole.
Dialog.Help	The "Help" button defined with HelpRole.
Dialog.SaveAll	"Save All" button defined with AcceptRole.
Dialog.Yes	"Yes" button defined with YesRole.
Dialog.YesToAll	"Yes to All" button defined with YesRole.
Dialog.No	The "No" button defined by NoRole.
Dialog.NoToAll	The "Don't accept all" button defined by NoRole.
Dialogue. Abortion	"Abort" button defined with RejectRole.
Dialog.Retry	"Retry" button defined with AcceptRole.
Dialog.Ignore	"Ignore" button defined with AcceptRole.
Dialog.NoButton	Invalid button.

This different Role will also correspond to different roles. That is, when different buttons are clicked, different signals will be emitted, and we can write different processing functions according to different signals.

Role	Signal
AcceptRole, YesRole	accepted()
ApplyRole	applied()
DiscardRole	discarded()
HelpRole	helpRequested()
RejectRole, NoRole	rejected()
ResetRole	reset()