一、前言
在项目中,运用到提示框,所以直接封装成一个qml方便调用,记录一下模板,实现简单的提示框功能。
功能相对简单,点击按钮,弹出一个带按键的提示框。
二、调用方式
直接创建一个object对象,打开就行。
三、程序源码
程序涉及到上一篇TTF字体的调用,及引用其他qml。
主要有四个文件main.qml, ColorButton.qml, InfoDailog.qml, WarningDialog.qml。
在main.qml创建一个按钮,点击后调用InfoDialog.qml。
InfoDialog.qml套用WarningDialog.qml文件。
ColorButton.qml为创建带有颜色的按钮,可以独立使用。
一、源码
1. main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Button {
text: qsTr("测试")
onClicked: {
var infoDialog = infoDialogCmpt.createObject(parent);
infoDialog.title = qsTr("测试结果");
infoDialog.contentText = qsTr("测试通过");
infoDialog.open();
}
}
/* 提示对话框 */
Component {
id: infoDialogCmpt
InfoDialog {
onClosed: destroy()
}
}
}
2、InfoDialog.qml
import QtQuick 2.14
import QtQuick.Controls 2.14
WarningDialog {
title: qsTr("提示")
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
ttfIcon: "\ue67b"
iconColor: "white"
}
3、WarningDialog.qml
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
Dialog {
id: dialog
property string contentText: "content text"
property color backgroundColor: "#404040"
property color textColor: "white"
property alias ttfIcon: iconText.text
property alias iconColor: iconText.color
anchors.centerIn: Overlay.overlay /* 居中展现 */
title: qsTr("提示")
modal: true /* 非模态对话框 */
closePolicy: Popup.NoAutoClose /* 不自动关闭 */
/* 背景 */
background: Rectangle {
color: dialog.backgroundColor
border.color: "#404040"
border.width: 2
radius: 8
}
/* 标题 */
header: Item {
implicitWidth: 32
Text {
id: titleLabel
anchors.centerIn: parent
text: dialog.title
color: dialog.textColor
font.pointSize: 9 * 1.2
verticalAlignment: Text.AlignVCenter
topPadding: 4
bottomPadding: topPadding
}
/* 水平分隔线 */
Rectangle {
id: horizontalLine
width: parent.width
height: 1
anchors.top: titleLabel.bottom
color: "#606060"
}
}
/* 内容 */
RowLayout {
spacing: 8
/* 内容图标 */
Text {
id: iconText
font.pointSize: 9 * 2
font.family: "iconfont"
text: "\ue60b"
color: "#ff7e79"
}
/* 内容文本 */
Text {
text: dialog.contentText
color: dialog.textColor
font.pointSize: 9
lineHeight: 1.5
wrapMode: Text.WordWrap
Layout.maximumWidth: 300
}
}
/* 对话框按钮 */
footer: DialogButtonBox {
buttonLayout: DialogButtonBox.WinLayout
alignment: Qt.AlignHCenter
ColoredButton {
text: qsTr("确定")
textColor: "#4CC5EF"
borderColor: textColor
DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
}
background: Rectangle {
color: dialog.backgroundColor
radius: 8
}
}
onAccepted: {
dialog.close(); /* 点击关闭 */
}
}
4、ColoredButton.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
Button {
id: control
/** 文本颜色 */
property color textColor: "white"
/** 边框颜色 */
property color borderColor: "white"
/** 背景色 */
property color bgColor: "transparent"
leftPadding: 16 * 0.2
rightPadding: 16 * 0.2
contentItem: Text {
text: control.text
font: control.font
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: control.textColor
elide: Text.ElideRight
opacity: enabled ? 1.0 : 0.6
leftPadding: control.leftPadding
rightPadding: control.rightPadding
}
background: Rectangle {
color: control.bgColor
border.width: control.hovered ? 1.5 : 1
border.color: control.borderColor
radius: height * 0.1
opacity: enabled ? 0.8 : 0.5
}
}
二、结果
点击测试按钮,弹出提示窗口。