QML学习二十：弹出提示框

一、前言

在项目中，运用到提示框，所以直接封装成一个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
    }
}

二、结果

点击测试按钮，弹出提示窗口。