标签：
对话框Dialog的设计在许多的QML应用是经常用到的。许多新的开发者刚开始接触QML，有时找不到头绪。也许是由于QML的设计太过灵活，所以实现的方法有非常多。这里介绍几种简单的方式。
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)
}
} 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);
}
}
}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()
}
}
}
}
Button {
id: mydialog
text: "My customized dialog"
onClicked: {
Qt.createComponent("Dialog.qml").createObject(mainpage, {});
}
}
MouseArea{
anchors.fill: parent
onClicked: {
// destroy object is needed when you dynamically create it
dialogComponent.destroy()
}
}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;
}
}
}
}
Button {
id: myanotherdialog
text: "My another dialog"
onClicked: {
dialog1.visible = true;
}
}
...
AnotherDialog {
id: dialog1
anchors.fill: parent
visible: false
}
标签：
原文地址：http://blog.csdn.net/ubuntutouch/article/details/46236415
