Question

我正在尝试学习QML，但我想不通如何通过写入文本的矩形更改颜色。

Rectangle {
     width: 50; height: 50; color: red
     Text {
         text: "20%"
         font.pointSize:10
     }
 }

应该执行类似以下操作：当文本> 10％，矩形颜色应为绿色，> 50％应为橙色等。

我阅读了Qt的教程，但无法理解。我尝试使用onTextChange进行此操作，但是不知何故。

谢谢您的帮助！

Answer 1

有很多选择。一种简单的方法是将颜色绑定到一个表达式，该表达式从JS对象中选择一个值：

Rectangle {
    width: 100
    height: 100
    color: {
        "text1" : 'red',
        "text2" : 'blue',
        "text3" : 'orange'
    }[myText.text]

    Text {
        id: myText
        text: "text2"
    }
}

文档表明，像这样的条件表达式的绑定可能更有效：

   Rectangle {
    width: 100
    height: 100
    color: (myText.text === "text1"
            ? 'green'
            : myText.text === "text2"
            ? 'red'
            : myText.text === "text3"
            ? 'orange'
            : 'black')

    Text {
        id: myText
        text: "text2"
    }
}

但是我认为它很难阅读。

OFC，您也可以像这样使用onTextChanged：

Rectangle {
    id: rect
    width: 100
    height: 100
    color: 'blue'

    Text {
        id: myText
        text: "text2"
        onTextChanged: {
            if (text === "text1") { rect.color = 'green'; return; }
            if (text === "text2") { rect.color = 'blue'; return; }
            if (text === "text3") { rect.color = 'orange'; return; }
        }
    }
}

但是我鼓励您尝试尽可能多地使用声明式（带有绑定）-特别是当您学习QML时，您可能会倾向于使用JS并开发一种（IMHO）错误的QML编码样式。

QML通过文本更改矩形的颜色

1 个答案: