QML學習筆記(2)-- Button

今天的筆記,是關於qml中的Button的部分內容。

更多QML筆記請點擊:開始QML學習之路

目錄

描述

如何連接到按鈕信號的代碼片段

屬性的文檔

自定義按鈕

1:background : Item

2:contentItem : Item


描述

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。

自定義按鈕

按鈕由兩個可視項組成: backgroundcontent 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
      }
  }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章