QML MenuBarItem与MenuItem的使用、详解与自定义样式
- 一、介绍
- 1、ToolButton
- 常见用法
- 基础示例
- 设置图标
- 常用属性
- `text`
- `icon`
- `enabled`
- `shortcut`
- `checkable` & `checked`
- 信号
- `onClicked`
- `onPressed` 和 `onReleased`
- 样式和外观
- 使用场景
- 2、DelayButton
- 使用场景
- 核心属性
- 1. `delay`
- 核心信号
- 1. `onActivated`
- 2. `onCanceled`
- 可用方法
- `reset()`
- 结合图标使用
- 提示用户延迟中的状态
- 样式自定义
- 二、效果查看
- 三、源码分享
一、介绍
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")
}
}
}
