qml Button 按钮

Button 按钮

在QML中，Button是一个非常常用的控件，
用于创建按钮，用户可以点击按钮来触发某些操作。
Button属于QtQuick.Controls模块，
提供了丰富的属性和信号，
使得开发者可以轻松地定制按钮的外观和行为。

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 640
    height: 480

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

常用属性
text: 按钮上显示的文本。
enabled: 控制按钮是否可用，默认为true。
pressed: 表示按钮是否被按下，只读属性。
hovered: 表示鼠标是否悬停在按钮上，只读属性。
flat: 如果设置为true，按钮将没有背景，默认为false。
icon.source: 设置按钮的图标，可以是图片路径或图标名称。
常用信号
onClicked: 当按钮被点击时触发。
onPressed: 当按钮被按下时触发。
onReleased: 当按钮被释放时触发。
onHoveredChanged: 当鼠标悬停状态改变时触发。

自定义外观

你可以通过修改Button的contentItem和background属性来自定义按钮的外观。

Button {
    text: "Custom Button"
    contentItem: Text {
        text: parent.text
        color: "white"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        color: parent.pressed ? "darkblue" : (parent.hovered ? "blue" : "lightblue")
        radius: 5
    }
}

在QML中，Button控件的父类是AbstractButton。
AbstractButton是一个抽象基类，
提供了按钮控件的基本功能和接口，包括点击、按下、释放等事件的处理。

Button继承了AbstractButton的所有属性和方法，
并在此基础上添加了一些特定于按钮的属性和行为。

AbstractButton 的主要属性和方法
属性
checkable: 控制按钮是否可以被选中（切换状态），默认为false。
checked: 表示按钮是否被选中，只有在checkable为true时有效。
autoRepeat: 控制按钮是否自动重复触发点击事件，默认为false。
autoRepeatDelay: 自动重复触发点击事件的延迟时间，单位为毫秒。
autoRepeatInterval: 自动重复触发点击事件的时间间隔，单位为毫秒。
信号
clicked: 当按钮被点击时触发。
pressed: 当按钮被按下时触发。
released: 当按钮被释放时触发。
toggled: 当按钮的选中状态改变时触发。
方法
click(): 模拟按钮被点击。
toggle(): 切换按钮的选中状态。

各种按钮

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

// 主应用程序窗口
ApplicationWindow {
    visible: true  // 窗口可见
    width: 800     // 窗口宽度
    height: 600    // 窗口高度
    title: "QML Button Showcase"  // 窗口标题

    // 垂直布局，用于排列各种按钮控件
    ColumnLayout {
        anchors.centerIn: parent  // 布局在父窗口中居中
        spacing: 20  // 控件之间的间距

        // 基本按钮
        Button {
            text: "Button"  // 按钮文本
            Layout.alignment: Qt.AlignCenter  // 在布局中居中对齐
            onClicked: console.log("Button clicked")  // 点击事件处理
        }

        // 工具按钮，通常用于工具栏
        ToolButton {
            icon.source: "qrc:/path/to/icon.png"  // 按钮图标
            Layout.alignment: Qt.AlignCenter  // 在布局中居中对齐
            onClicked: console.log("ToolButton clicked")  // 点击事件处理
        }

        // 圆形按钮
        RoundButton {
            text: "+"  // 按钮文本
            Layout.alignment: Qt.AlignCenter  // 在布局中居中对齐
            onClicked: console.log("RoundButton clicked")  // 点击事件处理
        }

        // 开关按钮，用于表示两种互斥的状态
        Switch {
            text: "Switch"  // 按钮文本
            Layout.alignment: Qt.AlignCenter  // 在布局中居中对齐
            onClicked: console.log("Switch state:", checked)  // 点击事件处理
        }
        // 延迟按钮，用于模拟网络请求
        DelayButton {
            width: 100  // 按钮宽度
            height: 50  // 按钮高度
            text: "DelayButton"  // 按钮文本
            Layout.alignment: Qt.AlignCenter  // 在布局中居中对齐
            delay: 2000  // 延迟时间，单位为毫秒
            onProgressChanged: console.log("DelayButton progress:", progress)  // 进度变化事件处理
        }
        // 复选框，用于表示二进制状态
        CheckBox {
            text: "CheckBox"  // 按钮文本
            Layout.alignment: Qt.AlignCenter  // 在布局中居中对齐
            onClicked: console.log("CheckBox state:", checked)  // 点击事件处理
        }

        // 单选按钮，用于表示一组互斥的选项
        RadioButton {
            text: "RadioButton"  // 按钮文本
            Layout.alignment: Qt.AlignCenter  // 在布局中居中对齐
            onClicked: console.log("RadioButton selected:", checked)  // 点击事件处理
        }

        // 旋钮按钮，用于调节数值
        Dial {
            value: 0.5  // 初始值
            Layout.alignment: Qt.AlignCenter  // 在布局中居中对齐
            onValueChanged: console.log("Dial value:", value)  // 值改变事件处理
        }

        // 数值输入框，带有上下箭头用于调整数值
        SpinBox {
            value: 50  // 初始值
            Layout.alignment: Qt.AlignCenter  // 在布局中居中对齐
            onValueChanged: console.log("SpinBox value:", value)  // 值改变事件处理
        }

        // 下拉列表按钮，用户可以从中选择一个选项
        ComboBox {
            model: ["Option 1", "Option 2", "Option 3"]  // 选项列表
            Layout.alignment: Qt.AlignCenter  // 在布局中居中对齐
            onCurrentIndexChanged: console.log("ComboBox selected:", currentText)  // 当前选项改变事件处理
        }

        // 自定义按钮，通过组合QML元素实现
        Rectangle {
            width: 100  // 按钮宽度
            height: 50  // 按钮高度
            color: mouseArea.pressed ? "darkblue" : "lightblue"  // 按钮背景颜色，根据按下状态变化
            radius: 5  // 按钮圆角
            Layout.alignment: Qt.AlignCenter  // 在布局中居中对齐

            // 按钮文本
            Text {
                text: "Custom Button"  // 文本内容
                color: "white"  // 文本颜色
                anchors.centerIn: parent  // 文本在按钮中居中对齐
            }

            // 鼠标区域，用于处理点击事件
            MouseArea {
                id: mouseArea
                anchors.fill: parent  // 填充父元素
                onClicked: console.log("Custom button clicked")  // 点击事件处理
            }
        }
    }
}