QML ToolButton与DelayButton的使用、详解与自定义样式

一、介绍

1、ToolButton

• 在 QML（Qt Markup Language）中，ToolButton 是一个提供工具按钮功能的控件，通常用于实现紧凑且功能性强的小型按钮，适用于工具栏或类似的用户界面场景。ToolButton 是 AbstractButton 的一个子类，因此它继承了很多基本按钮的特性，比如点击事件处理、启用状态、图标等。
• ToolButton 和 Button 的主要区别是它更轻量级，样式更简单，同时常常用于呈现一个图标或与工具相关的操作。

常见用法

以下是 ToolButton 的一些核心特性及其用法：

基础示例

import QtQuick 2.15
import QtQuick.Controls 2.15

ToolButton {
    text: "Click Me"
    onClicked: console.log("ToolButton Clicked!")
}

设置图标

ToolButton 通常用于显示图标按钮，你可以通过 icon 属性来设置图标。

import QtQuick 2.15
import QtQuick.Controls 2.15

ToolButton {
    icon.source: "icons/tools.png"
    text: "Tools"
    onClicked: console.log("ToolButton with icon clicked!")
}

常用属性

text

按钮上的文字，与 icon 一起显示时可以作为补充信息。

icon

指定按钮的图标，可以是一个 Image 资源。例如：

icon.source: "path_to_icon.png"

enabled

控制按钮是否可用。

ToolButton {
    text: "Disabled Button"
    enabled: false
}

shortcut

为按钮设置一个键盘快捷方式。

ToolButton {
    text: "Save"
    shortcut: "Ctrl+S"
    onClicked: console.log("Save clicked!")
}

checkable & checked

• checkable：设置为 true 时，按钮可被切换到选中状态。
• checked：指示该按钮是否处于选中状态。

ToolButton {
    text: "Toggle"
    checkable: true
    checked: true
    onCheckedChanged: console.log("Checked:", checked)
}

信号

onClicked

当按钮被点击时触发。

ToolButton {
    text: "Click Me"
    onClicked: console.log("Button Clicked!")
}

onPressed 和 onReleased

• onPressed：当按钮被按下时触发。
• onReleased：当按钮被释放时触发。

ToolButton {
    text: "Press Me"
    onPressed: console.log("Button Pressed!")
    onReleased: console.log("Button Released!")
}

样式和外观

ToolButton 的样式可以由 Style 控制，具体的个性化样式取决于应用的底层样式引擎（如 Material、Fusion 等）。在 Qt Quick Controls 2 中，使用 ToolButton 时，你可以通过设置 Control 的 background, foreground 等属性自定义外观。

ToolButton {
    text: "Custom Look"
    background: Rectangle {
        color: "blue"
        radius: 8
    }
}

使用场景

• 工具栏中的图标按钮。
• 小型、紧凑的按钮界面。
• 用于触发快速操作而不占用太多 UI 空间。

2、DelayButton

• 在 QML 中，DelayButton 是一个特殊的按钮控件，它的主要特点是需要等待一段时间（延迟）才能触发点击事件。这种按钮通常用在需要用户确认的场景，例如敏感操作（删除、重置、提交等），避免误操作。
• DelayButton 是 AbstractButton 的派生类，因此继承了标准按钮的功能，比如点击、启用状态、图标等，同时增加了一个延时确认功能。

使用场景

DelayButton 非常适合以下场景：

• 防止误触发重要操作，如删除或重置。
• 需要用户确认时间的操作。
• 表达某种用户需要等待的意图，比如计时器或者安全倒计时。

核心属性

1. delay

• 类型: int
• 描述: 按钮的延迟时间，单位为毫秒。
• 默认值: 2500 (2.5 秒)
• 作用: 指定触发点击事件需要按住按钮的时间长度。在这段时间内，如果用户未保持按下状态，将不会触发点击事件。

DelayButton {
    text: "Confirm Action"
    delay: 5000   // 延迟 5 秒
}

核心信号

1. onActivated

• 当延迟时间完成后且操作成功时触发。

DelayButton {
    text: "Reset Settings"
    delay: 4000
    onActivated: {
        console.log("Settings reset!")
    }
}

2. onCanceled

• 如果用户中途松开按钮或未达到延迟时间，则会触发 onCanceled 信号，表示操作被取消。

DelayButton {
    text: "Cancel Action"
    delay: 3000
    onCanceled: console.log("Action canceled!")
}

可用方法

reset()

• 作用：重置按钮的延迟计时器，使其需要从头重新计时。

DelayButton {
    text: "Restart Countdown"
    delay: 3000
    onTriggered: {
        console.log("Countdown finished!")
    }
    MouseArea {
        anchors.fill: parent
        onClicked: parent.reset()
    }
}

结合图标使用

你可以通过 icon 属性为 DelayButton 设置一个图标，提供更好的用户交互提示。

DelayButton {
    icon.source: "icons/delete.png"
    text: "Delete"
    delay: 3000
    onTriggered: console.log("Deleted!")
}

提示用户延迟中的状态

你可以使用 progress 属性显示当前延迟的完成百分比，比如用外部的 ProgressBar 结合 DelayButton 显示进度状态。

以下是示例代码：

Column {
    DelayButton {
        id: delayButton
        text: "Submit"
        delay: 5000
        onTriggered: console.log("Action executed!")
        onCanceled: console.log("Action canceled!")
    }

    ProgressBar {
        value: delayButton.progress
        from: 0
        to: 1
    }
}

样式自定义

DelayButton 的外观可以自定义（例如通过 background 属性）：

DelayButton {
    text: "Delay Action"
    delay: 3000
    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        color: delayButton.pressed ? "lightsteelblue" : "steelblue"
        radius: 8
    }
}

二、效果查看

三、源码分享

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Basic
import QtQuick.Dialogs
import CommunicationThread

ApplicationWindow {
    id:window
    width: 1300
    height: 850
    visible: true
    title: qsTr("Hello World")

    header: ToolBar{
        height: 55
        RowLayout{
            anchors.fill: parent
            ToolButton{
                id:btnExport
                implicitWidth: 60
                implicitHeight: 55
                text:"导出报表"
                icon.source:"qrc:/image/image/wait.svg"
                icon.width:32
                icon.height:32
                action:Action{
                    shortcut: StandardKey.Copy
                    onTriggered: console.log("onTriggered")
                }

                background: Rectangle{
                    color:btnExport.pressed?"lightblue":btnExport.hovered?"dodgerblue":"steelblue"
                    radius: 5
                }
                contentItem: Item {
                    Column{
                        Image {
                            width: parent.parent.parent.icon.width
                            height: parent.parent.parent.icon.height
                            source:parent.parent.parent.icon.source
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        Text{
                            text:parent.parent.parent.text
                            anchors.horizontalCenter: parent.horizontalCenter
                            color: btnExport.pressed?"white":"black"
                        }
                    }
                }
                onClicked: {
                    console.log("click")
                }
            }
        }
    }
    DelayButton{
        id:btnDelay
        width: 200
        height: 100
        text: "DelayButton"
        delay:2000
        background: Rectangle{
            color:btnDelay.pressed?"steelblue":btnDelay.hovered?"dodgerblue":"lightblue"
            radius:10
        }
        contentItem: Item{
            Text{
                anchors.fill: parent
                text:parent.parent.text
                color: parent.parent.progress===1?"white":"black"
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
        }
        indicator: Rectangle{
            height: parent.height
            width: parent.width*parent.progress
            color:"#aa000000"
            radius:10
        }
        onClicked: {
            console.log("DelayButton")
        }
        onActivated: {
            console.log("DelayButton onActivated")
        }
    }
}