QML学习笔记（2）-- Button

最新推荐文章于 2025-10-12 17:09:54 发布

原创最新推荐文章于 2025-10-12 17:09:54 发布 · 1.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#qml #Button

QML 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了QML中的Button组件，包括如何连接到按钮信号、属性详细说明以及如何自定义背景和内容项。Button提供了clicked()等信号，可以通过onClicked处理事件。属性如flat和highlighted分别控制按钮样式，而background和contentItem允许用户定制按钮视觉效果。

今天的笔记，是关于qml中的Button的部分内容。

更多QML笔记请点击：开始QML学习之路

描述

qml按钮显示一个用户可以按下或单击的按钮控件。按钮通常用于执行操作或回答问题。典型的按钮有OK、Apply、Cancel、Close、Yes、No和Help。

Button从AbstractButton继承其API。例如，您可以使用AbstractButton API设置文本、显示图标和对单击作出反应。
当按钮被用户激活时，它会发出clicked()信号。连接到这个信号来执行按钮的操作。按钮还提供用于长时间按压的信号cancel()、doubleClicked()、pressed()、release()和pressAndHold()。

如何连接到按钮信号的代码片段

RowLayout {
      Button {
          text: "Ok"
          onClicked: model.submit()
      }
      Button {
          text: "Cancel"
          onClicked: model.revert()
      }
  }

onClicked这个的意思，就是这个按钮的单击需要处理的事件。

属性的文档

1：flat : bool

此属性保持按钮是否为平的。

平面按钮通常不会绘制背景，除非它被按下或选中。

默认值为false。

2：highlighted : bool

该属性保持按钮是否突出显示。

按钮可以高亮显示以吸引用户的注意力。它对键盘交互没有影响。

默认值为false。

自定义按钮

按钮由两个可视项组成： background 和 content item.

给一个实例

  import QtQuick 2.12
  import QtQuick.Controls 2.12

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

1：background : Item

注意1:如果背景项没有明确指定大小，它会自动跟随控件的大小。在大多数情况下，没有必要为背景项指定宽度或高度。

注意2:大多数控件使用背景项的隐式大小来计算控件本身的隐式大小。如果用自定义项替换背景项，还应该考虑为其提供合理的隐式大小(除非是像Image这样有自己隐式大小的项)。

实例

Button {
      id: control
      text: qsTr("Button")
      background: Rectangle {
          implicitWidth: 100
          implicitHeight: 40
          opacity: enabled ? 1 : 0.3
          color: control.down ? "#d0d0d0" : "#e0e0e0"
      }
  }

2：contentItem : Item

注意1:内容项将自动调整大小以适应控件的填充。

注意2:大多数控件使用内容项的隐式大小来计算控件本身的隐式大小。如果您将内容项替换为自定义内容项，还应该考虑为其提供合理的隐式大小(除非它是文本之类具有自己隐式大小的项)。

实例

Button {
      id: control
      text: qsTr("Button")
      contentItem: Label {
          text: control.text
          font: control.font
          verticalAlignment: Text.AlignVCenter
      }
  }