QML -- Button Controls_qml

QML中的Button Controls: ​​https://doc.qt.io/qt-6/qtquickcontrols2-buttons.html​​

AbstractButtons

它是所有button的基类，为具有类似按钮行为控提供接口

属性

action

关于Action: ​​https://doc.qt.io/qt-6/qml-qtquick-controls2-action.html​​

某个功能可能会有多个不同的触发动作，比如​​copy可以按下ctrl + c也可以是编译菜单上的copy​​菜单项，设置工具栏上的快捷操作按钮。如果每一个触发动作都去定义一个处理函数显然是不合理的。

先定义一个Action:

Action {
    id: copyAction
    text: qsTr("&Copy")
    icon.name: "edit-copy"
    shortcut: StandardKey.Copy
    onTriggered: window.activeFocusItem.copy()
}

在工具栏中引用action

ToolButton {
    id: toolButton
    action: copyAction
}

在菜单是引用action

MenuItem {
    id: menuItem
    action: copyAction
    text: qsTr("&Copy selected Text")
}

autoExclusive（互斥/排它）

在同一个父对象中，如果开启了这个功能，就只能有一个​​checkable​​按钮被选中。

RadioButton和TabButton默认开启此功能。

autoRepeat

如果为true,按钮一直按下时，会重复的触发​​pressed released clicked  事件(pressAndHold​​不会发出)。

默认值： false

autoRepeatDelay /autoRepeatInterval

  • 初始延迟多少ms后开始重复触发，默认 300ms
  • 自动出发间隔时间，单位ms,默认100ms

checkable/checked

是否可以被​​checked / 是否被 checked​​ 了

desplay

这是一个枚举类型

QML -- Button Controls_checkbox_02

down/pressed

这两个属性的作用可以看成是一样的

icon group

  • cache
  • color
  • height
  • width
  • name
  • source

indicator

CheckBox / RadioButton 的小方框或小圆圈

text

按钮上的文本

信号

cancled()

按下按钮时loses mouse grab(不知道怎么翻译...),或者是光标离开了按钮区域，并未发出released信号时

其它

clicked() doubleClicked() pressAnHold() pressed(),released() 都是常规信号，没什么可讲的。

toggled() [ckechable==true时有效]

Button/RoundButton

flat

为true时不会画背景，直到按钮被按下或选中

highlighted

高亮用于吸引用户....,好像只在特定场景中有用，比如DelegateItem在ListView中，如果这一项为true就会有高亮显示。

radius

这是RoundButton特有的。

基本用法

import QtQuick
import QtQuick.Controls
import QtQuick.Particles
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Button {
        x: 10
        y: 10
        text: "home"
        icon.source: "qrc:/icon/index.svg"
        icon.color: "red"
        flat: true
        autoRepeat: true
        display: Button.IconOnly
        onPressed: console.log("pressed")
        onReleased: console.log("released")
        onClicked: console.log("clicked")
    }
    Action {
        id: copyAction
        icon.source: "qrc:/icon/index.svg"
        text: qsTr("&Copy")
        shortcut: StandardKey.Copy
        onTriggered: console.log("action triggered")
    }
    RoundButton {
        x: 10
        y: 60
        width: 100
        height: 100
        action: copyAction
        display: Button.IconOnly
        icon.color: "red"
        icon.width: 64
        icon.height: 64
        highlighted: false
        indicator: Rectangle {
            anchors.top: parent.top
            anchors.right: parent.right
            width: 10
            height: 10
            color: "blue"
        }
        radius: 10
    }

}

自定义按钮

RoundButton {
        y: 100
        x: 200
        id: control
        text: qsTr("Button")

        contentItem: Text {
            text: control.text
            font: control.font
            opacity: enabled ? 1.0 : 0.3
            color: control.down ? "#17a81a" : "#21be2b"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }

        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 40
            opacity: enabled ? 1 : 0.3
            border.color: control.pressed ? "#17a81a" : "#21be2b"
            border.width: 1
            radius: height / 2
            color: control.down? "gray": "green"
        }
        radius: height / 2
    }

GroupButton

​​https://doc.qt.io/qt-6/qml-qtquick-controls2-buttongroup.html​​

属性

buttons

GroupButton管理的按钮

checkState

Constant

Description

Qt.Unchecked

None of the buttons are checked.

Qt.PartiallyChecked

Some of the buttons are checked.

Qt.Checked

All of the buttons are checked.

checkedButton

exclusive为true时，返回当前选中的按钮，如果为exclusive为false，返回第一个选中的按钮。如果为null表示没有选中的按钮。

exclusive

是否互斥，为true时，组中只能有一个被选中的按钮.

使用示例

ButtonGroup {
    buttons: column.children
}

Column {
    id: column

    RadioButton {
        checked: true
        text: qsTr("DAB")
    }

    RadioButton {
        text: qsTr("FM")
    }

    RadioButton {
        text: qsTr("AM")
    }
}
ButtonGroup { id: radioGroup }

Column {
    Label {
        text: qsTr("Radio:")
    }

    RadioButton {
        checked: true
        text: qsTr("DAB")
        ButtonGroup.group: radioGroup
    }

    RadioButton {
        text: qsTr("FM")
        ButtonGroup.group: radioGroup
    }

    RadioButton {
        text: qsTr("AM")
        ButtonGroup.group: radioGroup
    }
}

RadioButton

没什么好说的，直接看自定...

​​https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customizing-radiobutton​​

​​RadioButton​​​ consists of three visual items: ​​background​​​, ​​content item​​​ and ​​indicator​​.

import QtQuick
import QtQuick.Controls

RadioButton {
    id: control
    text: qsTr("RadioButton")
    checked: true

    indicator: Rectangle {
        implicitWidth: 26
        implicitHeight: 26
        x: control.leftPadding
        y: parent.height / 2 - height / 2
        radius: 13
        border.color: control.down ? "#17a81a" : "#21be2b"

        Rectangle {
            width: 14
            height: 14
            x: 6
            y: 6
            radius: 7
            color: control.down ? "#17a81a" : "#21be2b"
            visible: control.checked
        }
    }

    contentItem: Text {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#17a81a" : "#21be2b"
        verticalAlignment: Text.AlignVCenter
        leftPadding: control.indicator.width + control.spacing
    }
}

CheckBox

import QtQuick
import QtQuick.Controls
import QtQuick.Particles
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

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

        CheckBox {
            id: parentBox
            text: qsTr("Parent")
            // 层级关系..
            checkState: childGroup.checkState
            tristate: true
        }

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

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

自定义：​​https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customizing-checkbox​​