如何在QML应用中设计自己的Dialog

对话框Dialog的设计在许多的QML应用是经常用到的。许多新的开发者刚开始接触QML，有时找不到头绪。也许是由于QML的设计太过灵活，所以实现的方法有非常多。这里介绍几种简单的方式。

１）使用Ubuntu SDK提供的标准API

我们可以使用Ubuntu SDK提供的标准Dialog接口。使用的方法非常简单：

import QtQuick 2.4
import Ubuntu.Components 1.2
import Ubuntu.Components.Popups 1.0
Item {
width: units.gu(80)
height: units.gu(80)
Component {
id: dialog
Dialog {
id: dialogue
title: "Save file"
text: "Are you sure that you want to save this file?"
Button {
text: "cancel"
onClicked: PopupUtils.close(dialogue)
}
Button {
text: "overwrite previous version"
color: UbuntuColors.orange
onClicked: PopupUtils.close(dialogue)
}
Button {
text: "save a copy"
color: UbuntuColors.orange
onClicked: PopupUtils.close(dialogue)
}
}
}
Button {
anchors.centerIn: parent
id: saveButton
text: "save"
onClicked: PopupUtils.open(dialog)
}
}

就像文档中介绍的那样，我们需要import Ubuntu.Components.Popups 1.0模块来完成这个。这是目前最简单的方法，而且使用这样的方法，我们可以得到Ubuntu的look and feel。在调用时也可以传人我们的caller:

Component {
id: dialog
Dialog {
id: dialogue
title: "Save file"
text: "Are you sure that you want to save this file?"
Button {
text: "cancel"
onClicked: PopupUtils.close(dialogue)
}
Button {
text: "overwrite previous version"
color: UbuntuColors.orange
onClicked: PopupUtils.close(dialogue)
}
Button {
text: "save a copy"
color: UbuntuColors.orange
onClicked: {
console.log("caller: " + caller );
if ( caller !== null ) {
caller.callback("file is saved!");
}

PopupUtils.close(dialogue);
}
}
}
}

Column {
anchors.centerIn: parent
spacing: units.gu(2)

Button {
id: saveButton
text: "save"
onClicked: PopupUtils.open(dialog)

function callback(message) {
console.log("returned: " + message);
}
}

Button {
id: anotherSave
text: "Another Save"
onClicked: PopupUtils.open(dialog, anotherSave)

function callback(message) {
console.log("returned: " + message);
}
}
}

这样我们可以通过caller来“callback”回调我们的方法。

２）创建我们自己的Dialog Component并动态调用它

我们可以自己创建一个自己的Dialog.qml文件来存放为我们的Dialog所需要的内容：

import QtQuick 2.0

Item {
id: dialogComponent
anchors.fill: parent

// Add a simple animation to fade in the popup
// let the opacity go from 0 to 1 in 400ms
PropertyAnimation { target: dialogComponent; property: "opacity";
duration: 400; from: 0; to: 1;
easing.type: Easing.InOutQuad ; running: true }

// This rectange is the a overlay to partially show the parent through it
// and clicking outside of the 'dialog' popup will do 'nothing'
Rectangle {
anchors.fill: parent
id: overlay
color: "#000000"
opacity: 0.6
// add a mouse area so that clicks outside
// the dialog window will not do anything
MouseArea {
anchors.fill: parent
}
}

// This rectangle is the actual popup
Rectangle {
id: dialogWindow
width: 300
height: 300
radius: 10
anchors.centerIn: parent

Text {
anchors.centerIn: parent
text: "This is the popup"
}

// For demo I do not put any buttons, or other fancy stuff on the popup
// clicking the whole dialogWindow will dismiss it
MouseArea{
anchors.fill: parent
onClicked: {
// destroy object is needed when you dynamically create it
dialogComponent.destroy()
}
}
}
}

我们可以通过如下的方法来动态创建这个Dialog:

Button {
id: mydialog
text: "My customized dialog"
onClicked: {
Qt.createComponent("Dialog.qml").createObject(mainpage, {});
}
}

这个动态创建的Dialog在点击自己的页面时，被自动消除了。

MouseArea{
anchors.fill: parent
onClicked: {
// destroy object is needed when you dynamically create it
dialogComponent.destroy()
}
}

这里的设计因人而异。我们可以设计自己的按钮来销毁创建的Dialog，并同时传回自己的选择。这个方法的好处是设计的UI不必绑定特定的操作系统，比如Ubuntu。这样这样的代码可以在多个平台上运行。

3）创建一个不可见的页面，在需要是显现

这个方法的实现也是非常简单，也在许多的QML应用中被使用。在创建页面时，我们可以同时创建不可见的部分。它们可以是重叠在一起的。只是在某个时间，只有一个页面可以被显示。通常不可见的页面在启动时被设置为“Dialog”。只有在需要的时候才可以被设置为可见。

为了说明问题，我们同样设置了一个自己的AnotherDialog.qml文件：

import QtQuick 2.0

Item {
id: dialogComponent
anchors.fill: parent

// Add a simple animation to fade in the popup
// let the opacity go from 0 to 1 in 400ms
PropertyAnimation { target: dialogComponent; property: "opacity";
duration: 400; from: 0; to: 1;
easing.type: Easing.InOutQuad ; running: true }

// This rectange is the a overlay to partially show the parent through it
// and clicking outside of the 'dialog' popup will do 'nothing'
Rectangle {
anchors.fill: parent
id: overlay
color: "#000000"
opacity: 0.6
// add a mouse area so that clicks outside
// the dialog window will not do anything
MouseArea {
anchors.fill: parent
}
}

// This rectangle is the actual popup
Rectangle {
id: dialogWindow
width: 300
height: 300
radius: 10
anchors.centerIn: parent

Text {
anchors.centerIn: parent
text: "This is the popup"
}

// For demo I do not put any buttons, or other fancy stuff on the popup
// clicking the whole dialogWindow will dismiss it
MouseArea{
anchors.fill: parent
onClicked: {
// destroy object is needed when you dynamically create it
console.log("it is clicked!");
dialogComponent.visible = false;
}
}
}
}

在我们的Main.qml中：

Button {
id: myanotherdialog
text: "My another dialog"
onClicked: {
dialog1.visible = true;
}
}

　　...

AnotherDialog {
id: dialog1
anchors.fill: parent
visible: false
}

我们通过这样的方法，可以设计出我们自己想要的任何一个Dialog。如果不采用Ubuntu的任何API，你可以让它运行到任何一个你想要的平台之中。相比较第二种方法，这个方法需要占用额外的内存，并且在应用一启动时，就会被装载到内存中。

运行我们的测试应用：







整个项目的源码在：https://github.com/liu-xiao-guo/dialog