使用QML设置自定义组件的属性不起作用，以下逻辑存在问题。

huangapple
go评论94阅读模式
英文:

Setting properties of Custom Components using QML does not work, what is the problem in following logic?

问题

I have the following two qml files. 我有以下两个qml文件。
I want to change the color of the button to a darker tone when I press it and then restore the color when I release the button. 当我按下按钮时，我想将按钮的颜色改为较暗的色调，然后在释放按钮时恢复颜色。
But with every click, the button color gets darkened only, and the text on it becomes unreadable after a few clicks. 但是每次点击后，按钮的颜色只会变暗，几次点击后上面的文本变得无法阅读。
What is the actual problem with this logic? 这个逻辑的实际问题是什么？

英文:

I have following two qml files. I want to change the color of the button to darker tone when i press it and then restore the color when i release the button. But with evety click button color gets darkened only and the text on it becomes unreadable after few clicks. What is the actual problem with this logic ?

// CustomButton.qml

  1. import QtQuick 2.12
  3. Item {
  4.     property alias text: name.text
  5.     property alias color: btn.color
  6.     property var old_color
  8.     Rectangle {
  9.         id: btn
  10.         width: name.implicitWidth
  11.         height: name.implicitHeight
  12.         radius: 4
  13.         color: "beige"
  14.         border {
  15.             color: Qt.darker("beige")
  16.             width: 2
  17.         }
  19.         Text {
  20.             id: name
  21.             padding: 20
  22.             text: "Click Me"
  23.         }
  25.         MouseArea {
  26.             anchors.fill: parent
  28.             onPressed: {
  29.                 old_color = btn.color
  30.                 btn.color = Qt.darker(btn.color)
  31.             }
  33.             onReleased: {
  34.                 btn.color = old_color
  35.             }
  37.             onClicked: {
  38.                 console.log("clicked " + name.text)
  39.             }
  40.         }
  41.     }
  42. }

// main.qml

  1. import QtQuick.Window 2.12
  3. Window {
  4.     visible: true
  5.     width: 640
  6.     height: 480
  8.     CustomButton {
  9.         text: "Register"
  10.         x: 100; y: 100
  11.         color: "red"
  12.     }
  14.     CustomButton {
  15.         text: "Login"
  16.         x: 200; y: 200
  17.     }
  19.     CustomButton {
  20.         x: 300; y: 300
  21.     }
  22. }

答案1

得分: 2

以下是您要翻译的内容：

根据folibis在您的问题评论中所说，您在颜色属性上使用var类型的方式会创建一个值类型引用。这就像是引用/指针，因此颜色对象会传递并被重复使用，导致颜色变得越来越暗。要解决这个问题，请将您的属性类型设置为color。一般来说，如果可能的话，总是使用QML类型，而不是依赖于var。

也可以不需要像这样的赋值来编写您的按钮：

  1. import QtQuick
  2. import QtQuick.Window
  4. Window {
  5.     width: 640
  6.     height: 480
  7.     visible: true
  8.     title: qsTr("Hello World")
  10.     component CustomButton : Item {
  11.         id: button
  12.         property alias text: name.text
  13.         property color color: "beige"
  15.         Rectangle {
  16.             id: btn
  17.             width: name.implicitWidth
  18.             height: name.implicitHeight
  19.             radius: 4
  20.             color: mouseArea.pressed ? Qt.darker(button.color) : button.color
  21.             border {
  22.                 color: Qt.darker("beige")
  23.                 width: 2
  24.             }
  26.             Text {
  27.                 id: name
  28.                 padding: 20
  29.                 text: "Click Me"
  30.             }
  32.             MouseArea {
  33.                 id: mouseArea
  34.                 anchors.fill: parent
  35.             }
  36.         }
  37.     }
  39.     CustomButton {
  40.         text: "Register"
  41.         x: 100; y: 100
  42.         color: "red"
  43.     }
  45.     CustomButton {
  46.         text: "Login"
  47.         x: 200; y: 200
  48.     }
  50.     CustomButton {
  51.         x: 300; y: 300
  52.     }
  53. }
英文:

As folibis said in the comment on your question the way you are using the var type for the color property will create a Value Type Reference. This acts like a reference/pointer hence the color object is passed around and re-used resulting in the color becoming darker and darker. To solve that use color as the type of your property. As a rule of thumb always use a QML type if possible instead of relying on var.

That said you can also write your button without the need of assignments like this:

  1. import QtQuick
  2. import QtQuick.Window
  4. Window {
  5.     width: 640
  6.     height: 480
  7.     visible: true
  8.     title: qsTr("Hello World")
  10.     component CustomButton : Item {
  11.         id: button
  12.         property alias text: name.text
  13.         property color color: "beige"
  15.         Rectangle {
  16.             id: btn
  17.             width: name.implicitWidth
  18.             height: name.implicitHeight
  19.             radius: 4
  20.             color: mouseArea.pressed ? Qt.darker(button.color) : button.color
  21.             border {
  22.                 color: Qt.darker("beige")
  23.                 width: 2
  24.             }
  26.             Text {
  27.                 id: name
  28.                 padding: 20
  29.                 text: "Click Me"
  30.             }
  32.             MouseArea {
  33.                 id: mouseArea
  34.                 anchors.fill: parent
  35.             }
  36.         }
  37.     }
  39.     CustomButton {
  40.         text: "Register"
  41.         x: 100; y: 100
  42.         color: "red"
  43.     }
  45.     CustomButton {
  46.         text: "Login"
  47.         x: 200; y: 200
  48.     }
  50.     CustomButton {
  51.         x: 300; y: 300
  52.     }
  53. }

答案2

得分: 1

在CustomButton.qml中：

  1. import QtQuick 2.12
  3. Item {
  4.     property alias text: name.text
  5.     property alias color: btn.color
  6.     property var old_color
  8.     Rectangle {
  9.         id: btn
  10.         width: name.implicitWidth
  11.         height: name.implicitHeight
  12.         radius: 4
  13.         color: "beige"
  14.         border {
  15.             color: Qt.darker("beige")
  16.             width: 2
  17.         }
  19.         Text {
  20.             id: name
  21.             padding: 20
  22.             text: "Click Me"
  23.         }
  25.         MouseArea {
  26.             anchors.fill: parent
  28.             onPressed: {    
  29.                 btn.color = Qt.darker(btn.color)
  30.             }
  32.             onReleased: {
  33.                 btn.color = old_color
  34.             }
  36.             onClicked: {
  37.                 console.log("clicked " + name.text)
  38.             }
  39.         }
  40.     }
  41.     Component.onCompleted: old_color = color.toString()
  42. }

old_color应在Item创建后保持其初始值。

英文:

In CustomButton.qml

  1. import QtQuick 2.12
  3. Item {
  4.     property alias text: name.text
  5.     property alias color: btn.color
  6.     property var old_color
  8.     Rectangle {
  9.         id: btn
  10.         width: name.implicitWidth
  11.         height: name.implicitHeight
  12.         radius: 4
  13.         color: "beige"
  14.         border {
  15.             color: Qt.darker("beige")
  16.             width: 2
  17.         }
  19.         Text {
  20.             id: name
  21.             padding: 20
  22.             text: "Click Me"
  23.         }
  25.         MouseArea {
  26.             anchors.fill: parent
  28.             onPressed: {    
  29.                 btn.color = Qt.darker(btn.color)
  30.             }
  32.             onReleased: {
  33.                 btn.color = old_color
  34.             }
  36.             onClicked: {
  37.                 console.log("clicked " + name.text)
  38.             }
  40.         }
  41.     }
  42.     Component.onCompleted: old_color = color.toString()
  43. }

old_color should keep its initial value after Item is created.

huangapple
  • 本文由 发表于 2023年6月8日 13:53:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/76428945.html
  • qml
  • qt
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定