【QML-对话框】

弹出类

Dialog

对话框是一种弹出式对话框，主要用于短期任务和与用户的简短交流。与ApplicationWindow和Page类似，Dialog被组织成三个部分:header、contenttem和footer。

按钮将根据用户的系统平台以适当的顺序放置。

标志	含义
Dialog.Ok	用AcceptRole定义的“OK”按钮。
Dialog.Open	用AcceptRole定义的“打开”按钮。
Dialog.Save	用AcceptRole定义的“保存”按钮。
Dialog.Cancel	用RejectRole定义的“Cancel”按钮。
Dialog.Close	用RejectRole定义的“关闭”按钮。
Dialog.Discard	由DestructiveRole定义的“废弃”或“不保存”按钮，取决于平台。
Dialog.Apply	由ApplyRole定义的“应用”按钮。
Dialog.Reset	用ResetRole定义的“重置”按钮。
Dialog.RestoreDefaults	使用ResetRole定义的“恢复默认值”按钮。
Dialog.Help	用HelpRole定义的“帮助”按钮。
Dialog.SaveAll	用AcceptRole定义的“Save All”按钮。
Dialog.Yes	用YesRole定义的“Yes”按钮。
Dialog.YesToAll	用YesRole定义的“Yes to All”按钮。
Dialog.No	NoRole定义的“No”按钮。
Dialog.NoToAll	NoRole定义的“不接受所有”按钮。
Dialog.Abort	用RejectRole定义的“Abort”按钮。
Dialog.Retry	用AcceptRole定义的“重试”按钮。
Dialog.Ignore	用AcceptRole定义的“Ignore”按钮。
Dialog.NoButton	无效的按钮。

  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")
  }

模态对话框
模态对话框阻止输入到对话框下的其他内容。打开模态对话框时，用户必须完成与对话框的交互并关闭它，然后才能访问同一窗口中的任何其他内容。其实就是设置的 modal 属性就好了

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

非模态的对话框
非模态对话框是独立于对话框周围的其他内容进行操作的对话框。当打开一个非模态对话框时，用户可以在同一个窗口中与对话框和其他内容进行交互。

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

Drawer

抽屉可以放置在内容项的四个边缘中的任何一个。下面的抽屉靠在窗口的左边缘。
从窗口左侧“拖”出抽屉，打开抽屉。

** 示例一 **

  import QtQuick 2.14
  import QtQuick.Controls 2.14

  ApplicationWindow {
      id: window
      visible: true

      Drawer {
          id: drawer
          width: 0.66 * window.width
          height: window.height

          Label {
              text: "左边抽屉内容"
              anchors.centerIn: parent
          }
      }
  }

** 示例二 **

  import QtQuick 2.14
  import QtQuick.Controls 2.14

  ApplicationWindow {
      id: window
      width: 200
      height: 228
      visible: true
      Drawer {
          id: drawer
          width: 0.66 * window.width
          height: window.height
      }
      Label {
          id: content
          text: "Aa"
          font.pixelSize: 96
          anchors.fill: parent
          verticalAlignment: Label.AlignVCenter
          horizontalAlignment: Label.AlignHCenter
          transform: Translate {
              x: drawer.position * content.width * 0.33
          }
      }
  }

FileDialog文件对话框

  import QtQuick 2.2
  import QtQuick.Dialogs 1.0

  FileDialog {
      id: fileDialog
      title: "Please choose a file"
      folder: shortcuts.home
      onAccepted: {
          console.log("You chose: " + fileDialog.fileUrls)
          Qt.quit()
      }
      onRejected: {
          console.log("Canceled")
          Qt.quit()
      }
      Component.onCompleted: visible = true
  }

https://blog.csdn.net/qq_43680827/article/details/130170675

FontDialog字体对话框

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
import QtQuick.Dialogs 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Button{
        id:button
        text: "字体选择"

        anchors.centerIn: parent

        onClicked: {
            fontDialog.open();
        }

        FontDialog {
              id: fontDialog
              title: "Please choose a font"
              font: Qt.font({ family: "Arial", pointSize: 24, weight: Font.Normal })
              onAccepted: {
                  console.log("You chose: " + fontDialog.font)
                  button.font = fontDialog.font;
              }
              onRejected: {
                  console.log("Canceled")
              }
          }
    }
}

ColorDialog 颜色对话框

  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
  }

MessageDialog 消息提示框

** 示例一 **

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
import QtQuick.Dialogs 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Button {
        id: button1
        x: 270
        y: 335
        text: qsTr("打开消息对话框")

        onClicked: {
            messageDialog.open();
        }

        MessageDialog {
            id: messageDialog
            title: "标题"
            icon: StandardIcon.Critical
            text: "文本内容"
            
            
            onAccepted: {
                console.log("And of course you could only agree.")
            }
        }
    }
}

** 示例二 **

MessageDialog {
      title: "Overwrite?"
      icon: StandardIcon.Question
      text: "file.txt already exists.  Replace?"
      detailedText: "To replace a file means that its existing contents will be lost. " +
          "The file that you are copying now will be copied over it instead."
      standardButtons: StandardButton.Yes | StandardButton.YesToAll |
          StandardButton.No | StandardButton.NoToAll | StandardButton.Abort
      Component.onCompleted: visible = true
      onYes: console.log("copied")
      onNo: console.log("didn't copy")
      onRejected: console.log("aborted")
  }