QML Button、ToolButton 、ButtonStyle、ToolBar

QML  Button、ToolButton 、ButtonStyle、ToolBar 

目录

QML  Button、ToolButton 、ButtonStyle、ToolBar 

Button

示例

ToolButton 

示例

ButtonStyle

示例

ToolBar

示例

 

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

Button

【isDefault : bool】

• 此属性保存按钮是否为默认按钮。
  • 默认按钮决定了当用户在对话框中按enter键而没有给按钮明确的焦点时会发生什么。
• 注意：此属性仅更改按钮的外观。预期的行为需要由用户实现。
• 默认值为false。

【menu : Menu】

• 将菜单指定给此属性以获取下拉菜单按钮。
• 默认值为空。

示例

• 按钮可能是任何图形用户界面中最常用的小部件。
• 按下（或点击）按钮命令计算机执行某些操作或回答问题。
• 按钮的常见示例有“确定”、“应用”、“取消”、“关闭”、“是”、“否”和“帮助”按钮。
• 按钮类似于QPushButton小部件。
• 通过指定按钮样式，可以为按钮创建自定义外观。

Button {
    text: "Button"
}

ToolButton 

• ToolButton在功能上类似于Button，但可以提供更适合工具栏的外观。

示例

ApplicationWindow {
    ...
    toolBar: ToolBar {
        RowLayout {
            ToolButton {
                iconSource: "new.png"
            }
            ToolButton {
                iconSource: "open.png"
            }
            ToolButton {
                iconSource: "save-as.png"
            }
            Item { Layout.fillWidth: true }
            CheckBox {
                text: "Enabled"
                checked: true
            }
        }
    }
}

• 通过指定按钮样式，可以为ToolButton创建自定义外观，见ButtonStyle。

ButtonStyle

【background : Component】

• 这定义了按钮的背景。

【[read-only]control : Button】

• 此样式附加到的按钮。

【label : Component】

• 这定义了按钮的标签。

示例

• 可以通过用自定义设计替换ButtonStyle的“background”委托来创建自定义按钮。

Button {
    text: "A button"
    style: ButtonStyle {
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 25
            border.width: control.activeFocus ? 2 : 1
            border.color: "#888"
            radius: 4
            gradient: Gradient {
                GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
                GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
            }
        }
    }
}

• 如果需要自定义标签，可以替换标签项。

ToolBar

• 工具栏是应用程序范围内和上下文敏感的操作和控件（如导航按钮和搜索字段）的容器。工具栏通常用作应用程序窗口的页眉或页脚。
• 工具栏不提供自己的布局，但要求定位其内容。
  • 例如通过创建行布局。如果工具栏中只使用一个项目，它将调整大小以适应其所包含项目的隐式大小。
  • 这使得它特别适合与布局一起使用。

【position : enumeration】

• 此属性保留工具栏的位置。
• 注意：如果工具栏被指定为应用程序窗口或页面的页眉或页脚，则会自动设置相应的位置。
• 可能值：

Constant	Description
ToolBar.Header	标题工具栏位于顶部，作为窗口或页眉。
ToolBar.Footer	页脚工具栏位于底部，作为窗口或页脚。

示例

ApplicationWindow {
    visible:true

    header: ToolBar {
        RowLayout {
            anchors.fill: parent
            ToolButton {
                text: qsTr("‹")
                onClicked: stack.pop()
            }
            Label {
                text: "Title"
                elide: Label.ElideRight
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                Layout.fillWidth: true
            }
            ToolButton {
                text: qsTr("⋮")
                onClicked: menu.open()
            }
        }
    }

    StackView {
        id: stack
        anchors.fill: parent
    }
}