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

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

QML系列教程

QML教程一：布局组件

AbstractButton

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

属性

属性表格：

信号

函数

普通按钮Button

属性

示例

    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("点击了按钮")
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

单选按钮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")
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12

复选框CheckBox

属性

示例

       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
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

开关Switch

属性

示例

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

        }
        Switch {
            text: qsTr("Bluetooth")
        }
    }
1
2
3
4
5
6
7
8
9

s