我的目標是，當單擊按鈕時，按鈕顏色變為橙色并保持橙色，直到宣告 if 條件的結果。然后，如果滿足條件，我希望按鈕顏色為綠色，否則為紅色。但是，當我單擊按鈕時，直到條件結果明確，按鈕顏色才會改變，當條件確定時，按鈕顏色變為綠色或紅色。所以按鈕顏色永遠不會變成橙色。
我在下面展示了我的按鈕用法；
Button
{
...
...
onClicked: {
background.color = "orange"
if(some_condition))
background.color = "green"
else
background.color = "red"
}
}
注意：我在 if 條件下向設備發送資料并等待其回應（這大約需要 1-2 秒）。我希望按鈕在答案到來之前為橙色，如果我的條件在答案后為真，則為綠色，如果為假，則為紅色。但是按鈕的顏色不會變成橙色。
你有什么建議嗎？
uj5u.com熱心網友回復：
為此，必須使用屬性系結。
在這個例子中，我將用它Image來演示你加載的東西。
對于這個例子，我提供了兩種方法。
方法一
因此，計劃如下。
- 我按
Button. - 影像的源發生變化，并進入加載狀態。
并且Button變成橙色。 - 如果進入就緒狀態，
Button則變為綠色。Image - 否則，
Button變成紅色。
Grid {
columns: 1
Image {
id: img
width: 200; height: 200
fillMode: Image.PreserveAspectFit
}
Button {
palette.button: img.status == Image.Loading ? "orange" :
img.status == Image.Ready ? "green" :
img.status == Image.Error ? "red" : "#259bd7"
onClicked: img.source = "https://thispersondoesnotexist.com/image";
}
}
方法二
在大多數方面類似于方法一，但不是宣告式的。
我按下Button，Button只要影像狀態發生變化，它就會變成綠色或紅色。
Grid {
columns: 1
Image {
id: img
width: 200; height: 200
fillMode: Image.PreserveAspectFit
onStatusChanged: {
if(status == Image.Ready) btn.palette.button = "green";
else if(img.status == Image.Error) btn.palette.button = "red";
}
}
Button {
id: btn
palette.button: "#259bd7"
onClicked: {
palette.button = "orange"
img.source = "https://thispersondoesnotexist.com/image";
}
}
}
現在，如果出于某種奇怪的原因，您想在按鈕中執行所有操作，您可以放置??一個布爾屬性并隨著顏色的變化而改變顏色。
喜歡：
Image {
...
onStatusChanged: {
// some code and calculation
btn.condition = // true or false
}
}
Button {
...
property bool condition
onConditionChanged: {
if(condition) palette.button = "green";
else palette.button = "red";
}
...
}
Example.qml
好的，所以我們現在知道答案是什么，讓我們改進它（如果懶惰的程式員想要復制：D）。
Image.status 是一個列舉值，范圍從 0 到 3。
Image {
id: img
width: 200; height: 200
fillMode: Image.PreserveAspectFit
}
Button {
id: btn
implicitHeight: 30
property list<Item> content: [
Item {},
Text { text: " ?" },
BusyIndicator { running: true },
Text { text: " ?" }
]
contentItem: Item {
width: parent.implicitWidth
Grid {
x: (parent.width - width)/2
spacing: 6
Text { text: "button" }
Control { contentItem: btn.content[img.status] }
Behavior on x { SmoothedAnimation {}}
}
}
onClicked: img.source = "https://thispersondoesnotexist.com/image";
}
預習
忙碌指示
- 示例中的
BusyIndicator：https ://github.com/SMR76/qml-snow-white/blob/master/SnowWhite/BusyIndi??cator.qml - https://github.com/Furkanzmc/QML-Loaders
uj5u.com熱心網友回復：
在這個答案中，我Button background通過將其設定為 a 進行操作，Rectangle并控制Rectangle's 顏色在 (1) 默認按鈕顏色、(2) 橙色、(3) 紅色和 (4) 綠色之間進行迭代。因此，我確定有 4 個獨特的狀態，詳細如下：
- 按鈕尚未被點擊，按鈕背景顏色為默認顏色
- 按鈕已被點擊，但用戶沒有輸入任何內容，按鈕背景變為“橙色”
- 文字已輸入，但答案錯誤，按鈕顏色變為“紅色”
- 文字已輸入，答案正確。按鈕背景變為“綠色”
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
property bool started: false
ColumnLayout {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 10
Label {
visible: started
text: qsTr("What is 1 1?")
}
Frame {
Layout.fillWidth: true
visible: started
TextEdit {
id: answer
width: parent.width
}
}
Button {
background: Rectangle {
color: started
? answer.text
? answer.text === "2"
? "green"
: "red"
: "orange"
: palette.button
}
text: qsTr("Start")
onClicked: {
if (!started) {
started = true;
answer.text = "";
} else {
started = false;
}
}
}
}
}
您可以在線試用！
uj5u.com熱心網友回復：
我發現了一個棘手而簡單的解決方案，因為 Pressed 狀態發生在 Clicked 狀態之前；
Button {
...
...
onPressed: {
background.color = "orange"
}
onClicked: {
if(some_condition))
background.color = "green"
else
background.color = "red"
}
}
因此，只要我按下按鈕，按鈕顏色就會變為橙色，在條件結果明確后，按鈕顏色會根據條件變為紅色或綠色。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/523408.html
標籤：qt按钮qml