QML(22)——Button的用法详解

wangpailiulanqi8

已于 2023-10-10 13:12:30 修改

阅读量2.6k

点赞数

分类专栏： Qt 文章标签： qt

于 2023-10-09 10:38:11 首次发布

本文链接：https://blog.csdn.net/wangpailiulanqi8/article/details/133696407

版权

Qt 专栏收录该内容

25 篇文章 7 订阅

订阅专栏

一、效果展示

在这里插入图片描述

二、说明

最好在系统中启用Material Style，这样方便设置button的风格效果

CMakeLists.txt：加上QuickControls2，具体内容根据自己的文件修改

find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core Quick QuickControls2)
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core Quick QuickControls2)

target_link_libraries(my_qml_test
  PRIVATE Qt${QT_VERSION_MAJOR}::Core Qt${QT_VERSION_MAJOR}::Quick Qt${QT_VERSION_MAJOR}::QuickControls2)

main.cpp

#include <QQuickStyle> 
//  如果启用该属性，即使qml内未使用Material，系统也会启用Material
// 如高亮色改变、按钮字符全大写
QQuickStyle::setStyle("Material");

三、基础按钮

效果图

在这里插入图片描述

实现代码

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls.Material 2.15

ColumnLayout {
    property int textSize: 16

    //    width: 300
    //    height: 500
    // 不规定root的size，界面自动展示全部组件的边缘，spacing生效
    // 若规定root的size(设置width/height, 或者anchors.fill), spacing自动伸缩
    spacing: 10

    Button{
        Layout.alignment: Qt.AlignHCenter
        text: qsTr("Basic Button 1")
        // 系统启用Material，如果未设置该属性，字符会全大写
        font.capitalization: Font.MixedCase
        font.pixelSize: textSize
    }
    ......

注意事项

按钮文本大小写问题
在main.cpp中启用Material之后，按钮的文本会默认全大写，必须设置这个属性

font.capitalization: Font.MixedCase

按钮边缘间隔问题
如果想要控制按钮的边缘间隔，即文本与border之间的padding,可以设置如下属性

leftPadding: 0

在这里插入图片描述

四、文本按钮

效果图

在这里插入图片描述

实现代码

    Button{
        text: qsTr("Flat Button 3")
        font.capitalization: Font.MixedCase
        // 未触发时，文本状态    触发后，出现按钮轮廓
        flat: true
        font.pixelSize: 16
    }

五、Material按钮

如果设置按钮的背景色，或者文本颜色，可以通过这些属性

Material.accent：背景色
Material.foreground：文本色
Material.background：背景色

Material Style的其他使用方法，可以看这篇 QML(23)——material style的使用

效果图

在这里插入图片描述

实现代码

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls.Material 2.15

ColumnLayout {
    property int textSize: 16
    spacing: 10
    
    Button {
        Layout.alignment: Qt.AlignHCenter
        text: qsTr("Material accent 4")
        font.capitalization: Font.MixedCase
        font.pixelSize: textSize
        highlighted: true
        // 必须和highlighted一起使用
        Material.accent: Material.LightGreen
    }

    Button {
        Layout.alignment: Qt.AlignHCenter
        text: qsTr("Material foreground 5")
        font.capitalization: Font.MixedCase
        font.pixelSize: textSize
        // button中foreground相当于文本颜色
        // 不能和highlighted一起使用，会影响效果
        Material.foreground: Material.Pink
    }

    Button {
        Layout.alignment: Qt.AlignHCenter
        text: qsTr("Material background 6")
        font.capitalization: Font.MixedCase
        font.pixelSize: textSize
        highlighted: true
        // 必须和highlighted一起使用
        Material.background: Material.Teal
    }
}

六、图片按钮

button中可以添加图片，或者以图标形式展示

效果图

在这里插入图片描述

实现代码

// 方形图标按钮 1
    Button{
        Layout.alignment: Qt.AlignHCenter
        icon.height: 30
        icon.width: 30
        // button里面的图标，必须使用简单图形，可以给其填色
        icon.source: "qrc:/resource/pause_white.png"
        icon.color: Material.color(Material.Red)
        text: "Rec Button 7"
        font.capitalization: Font.MixedCase
        ToolTip.visible: hovered
        ToolTip.text: "This is button with picture 01"
    }

    // 方形图标按钮 2
    Button{
        Layout.alignment: Qt.AlignHCenter
        icon.height: 30
        icon.width: 30
        icon.source: "qrc:/resource/icons8-96.png"
        text: "Rec Button 8"
        font.capitalization: Font.MixedCase
        ToolTip.visible: hovered
        ToolTip.text: "This is button with picture 02"
    }

    // 圆形图标按钮 1
    RoundButton{
        flat: true
        Layout.alignment: Qt.AlignHCenter
        icon.source: "qrc:/resource/pause_white.png"
        icon.height: 30
        icon.width: 30
        // must use  Material.color()
        icon.color: Material.color(Material.Red)
        ToolTip.visible: hovered
        ToolTip.text: "This is round button with picture 01"
    }


    // 圆形图标按钮 2
    RoundButton{
        flat: true
        Layout.alignment: Qt.AlignHCenter
        icon.source: "qrc:/resource/icons8-96.png"
        icon.height: 50
        icon.width: 50
        ToolTip.visible: hovered
        ToolTip.text: "This is round button with picture 02"
    }

注意事项

图片的选择
button中的图片，只能选择简单图标图形
如果使用了非图标图形，会无法加载，运行时变成黑色，如button8, button10
图片颜色的改变

 // must use  Material.color()
 icon.color: Material.color(Material.Red)

提示文本ToolTip
图标按钮往往需要提示文本，来提醒用户按钮的功能

 ToolTip.visible: hovered
 ToolTip.text: "This is button with picture 02"

Button的ToolTip属性使用很方便，其他组件的ToolTip需要自己加工一下，详细方法可以看这篇博文 QML(24)——提示文本ToolTip的使用

七、Round Button

round button非常灵活，可以使用图标，也可以使用符号，文本
如果是长文本，按钮自动变成椭圆按钮

效果

在这里插入图片描述

代码

    RoundButton{
        flat: true
        Layout.alignment: Qt.AlignHCenter
        icon.source: "qrc:/resource/pause_white.png"
        icon.height: 30
        icon.width: 30
        // must use  Material.color()
        icon.color: Material.color(Material.Red)
        ToolTip.visible: hovered
        ToolTip.text: "This is round button with picture 01"
    }

    RoundButton {
        text: qsTr("<")
        Layout.alignment: Qt.AlignHCenter
        font.pixelSize: textSize
    }

    RoundButton {
        text: qsTr("A")
        Layout.alignment: Qt.AlignHCenter
        font.pixelSize: textSize
    }

    RoundButton {
        text: qsTr("A Button")
        font.capitalization: Font.MixedCase
        Layout.alignment: Qt.AlignHCenter
        font.pixelSize: textSize
    }

    RoundButton {
        text: "\u2713"  // Unicode Character 'CHECK MARK'
        Layout.alignment: Qt.AlignHCenter
        font.pixelSize: textSize
    }

八、Tool Button

如果text是长文本，效果和普通Button相同
效果来看，和flat button比较像，具体的区别我没仔细探究，欢迎大家在评论区交流一下
如果是符号文本，背景自动变为圆形，和Round Button类似
官方文档上，主要介绍了它和ToolBar组合使用的情形

效果图

在这里插入图片描述

实现代码

    ToolBar {
        Layout.alignment: Qt.AlignHCenter
        visible: showOption === 0 || showOption === 13
        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("⋮")
            }
        }
    }

效果图

在这里插入图片描述

实现代码

    RoundButton{
        flat: true
        Layout.alignment: Qt.AlignHCenter
        icon.source: "qrc:/resource/icons8-96.png"
        icon.height: 50
        icon.width: 50
        ToolTip.visible: hovered
        ToolTip.text: "This is round button with picture 02"
    }

    RoundButton {
        text: qsTr("<")
        Layout.alignment: Qt.AlignHCenter
        font.pixelSize: textSize
    }

    RoundButton {
        text: qsTr("A")
        Layout.alignment: Qt.AlignHCenter
        font.pixelSize: textSize
    }

    RoundButton {
        text: qsTr("A Button")
        font.capitalization: Font.MixedCase
        Layout.alignment: Qt.AlignHCenter
        font.pixelSize: textSize
    }

    RoundButton {
        text: "\u2713"  // Unicode Character 'CHECK MARK'
        Layout.alignment: Qt.AlignHCenter
        font.pixelSize: textSize
    }

    Item {
        height: 50
    }

    ToolButton{
        flat: true
        Layout.alignment: Qt.AlignHCenter
        icon.source: "qrc:/resource/pause_white.png"
        icon.height: 30
        icon.width: 30
        // must use  Material.color()
        icon.color: Material.color(Material.Red)
        ToolTip.visible: hovered
        ToolTip.text: "This is tool button 01"
    }

    ToolButton {
        text: qsTr("Tool Button 12")
        Layout.alignment: Qt.AlignHCenter
        font.capitalization: Font.MixedCase
        font.pixelSize: textSize
    }

    ToolButton {
        text: qsTr("<")
        Layout.alignment: Qt.AlignHCenter
        font.pixelSize: textSize
    }

    ToolButton {
        text: qsTr("A")
        Layout.alignment: Qt.AlignHCenter
        font.pixelSize: textSize
    }

    ToolButton {
        text: "\u2713"  // Unicode Character 'CHECK MARK'
        Layout.alignment: Qt.AlignHCenter
        font.pixelSize: textSize
    }

九、自定义按钮

如果有特殊需求，可以自定义实现组件的效果

效果图

在这里插入图片描述

实现代码

Button {
        id: control
        text: qsTr("Custome Button 11")
        font.capitalization: Font.MixedCase
        font.pixelSize: textSize
        Layout.alignment: Qt.AlignHCenter

        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.down ? "#17a81a" : "#21be2b"
            border.width: 1
            radius: 10
        }
    }