QML：如何创建由图像制作的3状态自定义按钮？

所以我尝试：QML：如何创建由图像制作的3状态自定义按钮？

Rectangle { 
     x: 617 
     y: 450 
    Image { 
     id: rect 
     source: "buttons/GO/GO!-norm.png" 
     smooth: true 
     opacity: 1 
     MouseArea { 
      id: mouseArea 
      anchors.fill: parent 
      hoverEnabled: true   //this line will enable mouseArea.containsMouse 
      onClicked: Qt.quit() 
     } 

     states: [ 
      State { 
       name: "mouse-over"; when: mouseArea.containsMouse 
       PropertyChanges { target: rect; scale: 0.95; opacity: 0; } 
       PropertyChanges { target: rect2; scale: 0.95; opacity: 1} 
       PropertyChanges { target: rect3; scale: 0.95; opacity: 0} 
      }, 

      State { 
       name: "mouse-down"; when: mouseArea.pressedButtons 
       PropertyChanges { target: rect; scale: 0.95; opacity: 0; } 
       PropertyChanges { target: rect2; scale: 0.95; opacity: 0} 
       PropertyChanges { target: rect3; scale: 0.95; opacity: 1} 
      } 
     ] 

     transitions: Transition { 
      NumberAnimation { properties: "scale, opacity"; easing.type: Easing.InOutQuad; duration: 500 } 
     } 
    } 

    Image { 
     id: rect2 
     source: "buttons/GO/GO!-over.png" 
     smooth: true 
     opacity: 0 
     anchors.fill: rect 

    } 

    Image { 
     id: rect3 
     source: "buttons/GO/GO!-down.png" 
     smooth: true 
     opacity: 0 
     anchors.fill: rect 

    } 
    }

但它在\只能在了美国......如何使我的按钮有3个状态？

来源

2012-04-19 myWallJSON

我不能完全肯定，如果这是发生了什么，但它可能：当你将鼠标放置的图像，它的不透明度被设置为0。documentation说：

改变不透明度还影响儿童项目该项目。
如果项目的不透明度设置为0，则该项目将不再接收鼠标事件。

因此，当你将鼠标放置时，rect.opacity设置为0，mouseArea停止接收鼠标事件和mouseArea.pressedButtons条件永远都无法满足。您可以通过使mouseArea成为Image而不是其子项的兄弟来避免这种情况。作为父项目使用Item或Rectangle。

来源

2012-04-19 13:23:39 teukkam

是的，不透明度：0是像可见：false。该项目停止存在。另一种方法是将不透明度设置为0.01而不是0，但我认为您的解决方案更清洁，因为它将鼠标区域与视图（图像）分开。 – blakharaz 2012-04-19 21:33:47

是的，我也将其视为第二种解决方案，将不透明度设置为非常低的非零值。这需要对现有代码进行较小的更改，并且至少在图像有点类似的情况下可以正常工作。 – teukkam 2012-04-20 06:15:53

QML：如何创建由图像制作的3状态自定义按钮？

回答

相关问题