今天的筆記,是關於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
}
}