QML AbstractButton | Button | ButtonGroup | Action

AbstractButton | Button |  ButtonGroup  |  Action 

目录

AbstractButton QML Type

Button QML Type

ButtonGroup QML Type

案例

Action QML Type

ActionGroup QML Type

AbstractButton QML Type

• 官方文档：https://doc.qt.io/qt-5/qml-qtquick-controls2-abstractbutton.html

• 信号：

Button QML Type

• 属性：

ButtonGroup QML Type

• buttons示例：

ButtonGroup {
    buttons: column.children
}

Column {
    id: column

    RadioButton {
        checked: true
        text: qsTr("Option A")
    }

    RadioButton {
        text: qsTr("Option B")
    }
}

【属性：checkedButton : AbstractButton】

• 此属性保存独占组中当前选定的按钮，如果没有或非独占组，则为空。
• 默认情况下，它是添加到排他按钮组的第一个选中按钮。

【附加属性】

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
    }
}

• 当单击组中的按钮时将发出此信号。
• 该信号便于为同一组中的所有按钮实现公共信号处理程序。

ButtonGroup {
    buttons: column.children
    onClicked: console.log("clicked:", button.text)
}

Column {
    id: column
    Button { text: "First" }
    Button { text: "Second" }
    Button { text: "Third" }
}

• 从按钮组中添加或者删除

案例

• 示例1

Column {
        Button {
            id: b1
            flat: true
            text: down ? "Clicked" : "One"
            autoExclusive: true
            onReleased: {
                console.log("pressX:" + pressX + " pressY:" + pressY)
            }
            highlighted: true
            checked: true
            checkable: true
        }
        Button {
            text: "Two"
        }
    }
}

• 示例2

    ButtonGroup {

        id: bg
        onClicked: console.log(button.text)
    }
    Column {
        id: col
        Button {
            text: "Add Button"
            onClicked: bg.addButton(one)
        }
        Button {
            text: "Remove Button"
            onClicked: bg.removeButton(one)
        }
        Button {
            id: one
            text: "One"
            checkable: true
        }

        Repeater {
            model: 10
            Button {
                text: "Index " + index
                checkable: true
                checked: index == 2 ? true : false
                ButtonGroup.group: bg
            }
        }
    }

Action QML Type

• 官方参考文档：https://doc.qt.io/qt-5/qml-qtquick-controls2-action.html

• 示例：

Action {
     id: copyAction
     //enabled: false
     text: qsTr("Copy")
     shortcut: StandardKey.Copy
     icon.source: "copy.png"
     icon.width: 24
     icon.height: 24
     onTriggered: {
         console.log("Copying")
     }
 }

• 其他控件使用：

ToolButton {
    id: toolButton
    action: copyAction
}

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

ActionGroup QML Type

• 官方文档：https://doc.qt.io/qt-5/qml-qtquick-controls2-actiongroup.html
• 各种属性和方法和ButtonGroup 类似

• 示例1：

ActionGroup {
    id: alignmentGroup

    Action {
        checked: true
        checkable: true
        text: qsTr("Left")
    }

    Action {
        checkable: true
        text: qsTr("Center")
    }

    Action {
        checkable: true
        text: qsTr("Right")
    }
}

• 示例2：使用附加属性

ActionGroup { id: alignmentGroup }

Action {
    checked: true
    checkable: true
    text: qsTr("Left")
    ActionGroup.group: alignmentGroup
}

Action {
    checkable: true
    text: qsTr("Center")
    ActionGroup.group: alignmentGroup
}

Action {
    checkable: true
    text: qsTr("Right")
    ActionGroup.group: alignmentGroup
}

【triggered(Action action)】

ActionGroup {
    onTriggered: console.log("triggered:", action.text)

    Action { text: "First" }
    Action { text: "Second" }
    Action { text: "Third" }
}