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

一、介绍

1、ToolButton

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

常见用法

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

基础示例

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

设置图标

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

import QtQuick 2.15
import QtQuick.Controls 2.15ToolButton {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: truechecked: trueonCheckedChanged: 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: 4000onActivated: {console.log("Settings reset!")}
}

2. onCanceled

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

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

---

可用方法

reset()

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

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

---

结合图标使用

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

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

---

提示用户延迟中的状态

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

以下是示例代码：

Column {DelayButton {id: delayButtontext: "Submit"delay: 5000onTriggered: console.log("Action executed!")onCanceled: console.log("Action canceled!")}ProgressBar {value: delayButton.progressfrom: 0to: 1}
}

---

样式自定义

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

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

二、效果查看

三、源码分享

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Basic
import QtQuick.Dialogs
import CommunicationThreadApplicationWindow {id:windowwidth: 1300height: 850visible: truetitle: qsTr("Hello World")header: ToolBar{height: 55RowLayout{anchors.fill: parentToolButton{id:btnExportimplicitWidth: 60implicitHeight: 55text:"导出报表"icon.source:"qrc:/image/image/wait.svg"icon.width:32icon.height:32action:Action{shortcut: StandardKey.CopyonTriggered: console.log("onTriggered")}background: Rectangle{color:btnExport.pressed?"lightblue":btnExport.hovered?"dodgerblue":"steelblue"radius: 5}contentItem: Item {Column{Image {width: parent.parent.parent.icon.widthheight: parent.parent.parent.icon.heightsource:parent.parent.parent.icon.sourceanchors.horizontalCenter: parent.horizontalCenter}Text{text:parent.parent.parent.textanchors.horizontalCenter: parent.horizontalCentercolor: btnExport.pressed?"white":"black"}}}onClicked: {console.log("click")}}}}DelayButton{id:btnDelaywidth: 200height: 100text: "DelayButton"delay:2000background: Rectangle{color:btnDelay.pressed?"steelblue":btnDelay.hovered?"dodgerblue":"lightblue"radius:10}contentItem: Item{Text{anchors.fill: parenttext:parent.parent.textcolor: parent.parent.progress===1?"white":"black"verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCenter}}indicator: Rectangle{height: parent.heightwidth: parent.width*parent.progresscolor:"#aa000000"radius:10}onClicked: {console.log("DelayButton")}onActivated: {console.log("DelayButton onActivated")}}
}