QML 基础按钮：Button、RoundButton 与 DelayButton

这篇文章讲 QML 三种最基础的按钮用法：普通按钮、圆形图标按钮和带长按确认的延迟按钮。

Button --- 文本、图标、可选中状态与点击反馈
RoundButton --- 圆形外观，适合图标操作
DelayButton --- 长按触发，防止误操作

Button - 普通按钮

一个带文件图标的按钮，点击后下方显示反馈文字。

演示代码

qml 复制代码

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

FadeInAnimation {
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 15

        // ... 省略标题组件 TitleSeparator ...

        Button {
            Layout.alignment: Qt.AlignHCenter
            Layout.preferredWidth: 160
            Layout.preferredHeight: 40
            text: "打开文件"
            font.pointSize: 13
            checkable: true
            icon.source: "qrc:/icons/file.png"
            onClicked: textResult.text = "点击了打开按钮"
        }

        Text {
            id: textResult
            Layout.alignment: Qt.AlignHCenter
        }

        Item { Layout.fillHeight: true }
    }
}

关键逻辑解析

text 设置按钮文字，icon.source 设置左侧图标，路径用 qrc:/ 引用资源文件。
checkable: true 让按钮变成可勾选状态，再次点击会取消选中。
onClicked 里直接给 textResult.text 赋值，是最常见的点击反馈写法。

适用场景：文件打开、保存、确认等常规操作。

RoundButton - 圆形按钮

一个圆形图标按钮，悬停时显示 ToolTip 提示。

演示代码

qml 复制代码

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

FadeInAnimation {
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 15

        // ... 省略标题组件 TitleSeparator ...

        RoundButton {
            Layout.alignment: Qt.AlignHCenter
            Layout.preferredWidth: 64
            Layout.preferredHeight: 64
            icon.source: "qrc:/icons/file.png"
            icon.width: 36
            icon.height: 36
            ToolTip.visible: hovered
            ToolTip.text: "新建文件"
            onClicked: textResult.text = "点击了新建按钮"
        }

        Text {
            id: textResult
            Layout.alignment: Qt.AlignHCenter
        }

        Item { Layout.fillHeight: true }
    }
}

关键逻辑解析

RoundButton 默认就是圆形，只要宽高相等，显示出来就是正圆。
icon.width / icon.height 控制图标大小，避免图标被拉伸。
ToolTip.visible: hovered 绑定到按钮的 hovered 属性，鼠标放上去就显示提示。

适用场景：工具栏、浮动操作按钮、图标密集区域。

DelayButton - 延迟按钮

一个需要长按 2 秒才能触发的按钮，进度实时显示在文字里。

演示代码

qml 复制代码

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

FadeInAnimation {
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 15

        // ... 省略标题组件 TitleSeparator ...

        DelayButton {
            Layout.alignment: Qt.AlignHCenter
            Layout.preferredWidth: 200
            Layout.preferredHeight: 40
            text: "确认格式化" + " (" + Math.round(progress * 100) + "%)"
            font.pointSize: 13
            delay: 2000
            onActivated: textResult.text = "Format Partition ..."
        }

        Text {
            id: textResult
            Layout.alignment: Qt.AlignHCenter
        }

        Item { Layout.fillHeight: true }
    }
}

关键逻辑解析

delay: 2000 设置按住 2 秒后触发，默认是 3 秒。
progress 属性在 0 到 1 之间变化，用 Math.round(progress * 100) 显示百分比。
onActivated 是真正触发的地方，只有按住达到 delay 时间才会执行。

适用场景：格式化、删除、重置等不可逆操作，避免误触。

对比表格

按钮	外观	主要属性	典型场景
Button	矩形	`text`、`icon.source`、`checkable`	常规操作
RoundButton	圆形	`icon.width`、`icon.height`	图标按钮
DelayButton	矩形带进度	`delay`、`progress`、`onActivated`	危险操作确认

运行验证

Qt Creator 打开 qml_button/CMakeLists.txt；
按 Ctrl+R 运行；
左侧导航切换到对应 demo，点击、悬停、长按按钮看效果。

扩展复用方向

给 Button 加 background 和 contentItem，做成项目统一的风格按钮。
把 RoundButton 放到 ToolBar 里，组成图标工具栏。
用 DelayButton 的 progress 做动画进度环，增强视觉反馈。

已验证环境：

Qt 版本：Qt 6.8.2、Qt 6.11.1
操作系统：Windows 11
GitHub：QML-Minimal-Demos/qml_button