qml保姆级教程四:按钮组件

个人主页:pp不会算法v
版权: 本文由【pp不会算法^v】原创、在CSDN首发、需要转载请联系博主
如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

QML系列教程

QML教程一：布局组件

AbstractButton

这是Button, CheckBox, DelayButton, ItemDelegate, MenuBarItem, MenuItem, RadioButton, Switch, and TabButton的共同父类

属性

属性表格：

属性	描述	默认值
action	按钮的动作。	无
autoExclusive	是否启用自动互斥。	false
autoRepeat	当按钮被按下并保持按下时，是否重复触发 pressed()、released() 和 clicked() 信号。	false
autoRepeatDelay	自动重复触发开始的延迟时间（毫秒）。	300
autoRepeatInterval	自动重复触发的时间间隔（毫秒）。	100
checkable	按钮是否可选中。	false
checked	按钮是否已选中。	false
display	按钮中图标和文本的显示方式。	TextBesideIcon
down	按钮是否处于按下状态。	undefined
icon.name	图标的名称。	“”
icon.source	图标的源文件路径。	“”
icon.width	图标的宽度。	0
icon.height	图标的高度。	0
icon.color	图标的颜色。	无
implicitIndicatorHeight	隐式指示器的高度。	0
implicitIndicatorWidth	隐式指示器的宽度。	0
indicator	按钮上的指示器项。	无
pressX	最后一次按下时的 x 坐标。	无
pressY	最后一次按下时的 y 坐标。	无
pressed	按钮是否处于物理按下状态。	false
text	按钮的文本描述。	“”

信号

信号名	描述
canceled	当按钮在被按下状态下失去焦点或鼠标抓取时发出。
clicked	当用户通过触摸、鼠标或键盘与按钮进行交互时发出。
doubleClicked	当用户通过触摸或鼠标双击与按钮进行交互时发出。
pressAndHold	当用户通过触摸或鼠标长按与按钮进行交互时发出。
pressed	当用户通过触摸、鼠标或键盘按下与按钮进行交互时发出。
released	当用户通过触摸、鼠标或键盘释放与按钮进行交互时发出。
toggled	当用户通过触摸、鼠标或键盘切换可选中按钮的选中状态时发出。

函数

方法名	描述
toggle	切换按钮的选中状态。

普通按钮Button

属性

属性	说明
flat	按钮是否为扁平样式。 flat属性决定按钮是否为扁平样式。扁平按钮通常只在被按下或选中时才会绘制背景。默认值为false。
highlighted	按钮是否为高亮状态。 highlighted属性决定按钮是否为高亮状态。高亮状态可用于吸引用户注意力，对键盘交互没有影响。默认值为false。

示例

    Button {
        height: 50
        width: 80
        text: "普通按钮"
        anchors.centerIn: parent

        background: Rectangle {
            id: buttonBackground
            color: "pink"
            radius: 5
            border.width: 0
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true

            onEntered: {
                buttonBackground.color ="#5FB0F3"// 鼠标悬停时的背景颜色
            }

            onExited: {
                buttonBackground.color = "pink"  // 恢复正常的背景颜色
            }
            onClicked: {
                console.log("点击了按钮")
            }
        }
    }

单选按钮RadioButton

RadioButton提供了一个选项按钮，可以打开（选中）或关闭（未选中）。单选按钮通常用于从一组选项中选择一个选项。
RadioButton从AbstractButton继承其API。例如，您可以使用AbstractButton
API设置文本并对点击做出反应。单选按钮的状态可以使用选中的属性进行设置。
默认情况下，单选按钮是自动独占的。在属于同一父项的单选按钮中，任何时候只能检查一个按钮；选中另一个按钮会自动取消选中先前选中的按钮。对于不共享公共父级的单选按钮，ButtonGroup可用于管理独占性。
RadioDelegate类似于RadioButton，只是它通常用于视图中。

示例

   ColumnLayout {
        RadioButton {
            checked: true //默认选中
            text: qsTr("First")
        }
        RadioButton {
            text: qsTr("Second")
        }
        RadioButton {
            text: qsTr("Third")
        }
    }

复选框CheckBox

属性

属性	描述	默认值
checkState	复选框的选中状态。	无
nextCheckState	确定用户交互切换复选框时下一个选中状态的回调函数。	无
tristate	复选框是否为三态复选框。	false

checkState 值	描述
Qt.Unchecked	复选框未选中状态。
Qt.PartiallyChecked	复选框处于部分选中状态。仅当 tristate 启用时才使用此状态。
Qt.Checked	复选框已选中状态。

示例

       Column {
            ButtonGroup {
                id: childGroup
                exclusive: false
                checkState: parentBox.checkState
            }

            CheckBox {
                id: parentBox
                text: qsTr("Parent")
                checkState: childGroup.checkState
            }

            CheckBox {
                checked: true
                text: qsTr("Child 1")
                leftPadding: indicator.width
                ButtonGroup.group: childGroup
            }

            CheckBox {
                text: qsTr("Child 2")
                leftPadding: indicator.width
                ButtonGroup.group: childGroup
            }
        }

开关Switch

属性

属性名	说明	默认值
position (只读)	逻辑位置	0
visualPosition (只读)	视觉位置	0
二者的区别 position只能是0或者1表示开关的关和开两种状态
visulPosition表示你实际看到开关你的圆点所在的位置范围为0.0~1.0，

示例

   ColumnLayout {
        Switch {
            text: qsTr("Wi-Fi")

        }
        Switch {
            text: qsTr("Bluetooth")
        }
    }

s