//自定义item dialog 代码如下:
import QtQuick 2.0
Item {
id: dialogComponent
anchors.fill: parent
property alias titleText: titleLabel.text
property alias cancelText: cancelButton.text
property alias okText: okButton.text
property Component contentItem:null
property alias contentComponent:contentComponent
property bool showFooter: true
signal accept()
signal reject()
// 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 }
// backgroud
// 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.2
// add a mouse area so that clicks outside
// the dialog window will not do anything
MouseArea {
anchors.fill: parent
onClicked: {
console.log("backGroud clicked")
}
}
}
// dialog 区域
// This rectangle is the actual popup
Rectangle {
id: dialogWindow
width: parent.width * 0.7
implicitHeight:headerItem.implicitHeight + implicitHeight+40
height: Math.min(implicitHeight, parent.height * 0.8)
color: '#232732'
anchors.centerIn: parent
focus: true
// title 头
Item{
id: headerItem
width: parent.width
implicitHeight: (titleText === '' 0 : titleLabel.implicitHeight + 40)
DefaultText {
id: titleLabel
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 20
}
}
// 中间文本
Item{
id : content
width: parent.width
anchors.top: headerItem.bottom
anchors.topMargin: 20
anchors.bottom: footerItem.top
Loader{
id : contentComponent
anchors.top: content.top
anchors.bottom: content.bottom
anchors.left: content.left
anchors.right: content.right
sourceComponent:contentItem
}
}
// 底部
Item {
id: footerItem
anchors.bottom: parent.bottom
anchors.bottomMargin: 2
width: parent.width
visible: showFooter
implicitHeight: (showFooter cancelButton.implicitHeight + 40 : 0)
DefaultButton {
id: cancelButton
anchors.left: parent.left
anchors.leftMargin: 20
anchors.top: parent.top
anchors.topMargin: 20
width: footerItem.width / 2 - 30
text: qsTr('取 消')
onClicked: {
console.log("cancel clicked")
reject()
}
}
DefaultButton {
id: okButton
anchors.right: parent.right
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 20
width: footerItem.width / 2 - 30
text: qsTr('确 认')
onClicked: {
console.log("ok clicked");
accept()
}
}
}
}
}
其中中间部分的自定义使用 property Component contentItem:null
property alias contentComponent:contentComponent
这两个将其引用出去的。
调用main.qml 文件如下 :
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.VirtualKeyboard 2.2
Window {
id: window
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MouseArea{
id: closeButton
anchors.fill:parent
onClicked: {
console.log("close button clicked.");
addAddress.visible = true;
}
}
DefaultItemDialog{
id : addAddress
visible: false
titleText: qsTr('输入信息')
showFooter: true
contentItem: Rectangle {
id : content
width: parent.width
implicitHeight: moneyInput.implicitHeight + 20
color: '#393f47'
property alias txt: moneyInput.text
TextInput {
id: moneyInput
anchors.verticalCenter: parent.verticalCenter
width: parent.width
maximumLength: 20
color: 'white'
}
}
onAccept:
{
var contentItem = contentComponent.item
console.log(contentItem)
console.log(contentItem.txt)
contentItem.txt = ""
addAddress.visible = false
}
}
InputPanel {
id: inputPanel
z: 99
x: 0
y: window.height
width: window.width
states: State {
name: "visible"
when: inputPanel.active
PropertyChanges {
target: inputPanel
y: window.height - inputPanel.height
}
}
transitions: Transition {
from: ""
to: "visible"
reversible: true
ParallelAnimation {
NumberAnimation {
properties: "y"
duration: 250
easing.type: Easing.InOutQuad
}
}
}
}
}