如何在 QML 5.2 中使用 JavaScript 访问一个按钮内的 buttonStyle 对象

Posted 2023-02-16

【中文标题】如何在 QML 5.2 中使用 JavaScript 访问一个按钮内的 buttonStyle 对象

【英文标题】：How to access the buttonStyle object inside of one button using JavaScript in QML 5.2

【发布时间】：2014-01-08 09:53:37

【问题描述】：

下面是我的 Qml 代码：

Button 
    id: newMenu

    anchors 
        top: topMenu.top
        topMargin: 15
        left: topMenu.left
        leftMargin: 16
    

    text: "New"
    iconSource: "../images/New.png"

    MouseArea 
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true         //this line will enable mouseArea.containsMouse
        onClicked: 
            newProjectFileDlg.visible = true
        
        onEntered: 
            console.log(tt1);
        
    

    style: ButtonStyle 
        id: buttonStyle
        background: Rectangle 
            id: tt1
            implicitWidth: 100
            implicitHeight: 25
            border.width: 0
            radius: 4
            color: mousearea.entered ? "lightsteelblue" : "#2e2e2e"
        
    

我想访问这个按钮的样式属性，当鼠标悬停时改变背景颜色。但是 console.log 输出总是

qrc:/qmls/menu.qml:40: ReferenceError: tt1 is not defined

如何使用 javascript 获取元素？或者我们是否有其他方法可以在输入鼠标时更改背景颜色。

【问题讨论】：

你为什么使用 tt1 而不是 buttonStyle？这会引发类似的 ReferenceError 吗？

@LaszloPapp 是的，它输出 qrc:/qmls/menu.qml:40: ReferenceError: buttonStyle is not defined

嗨。我不确定您是否在寻找什么，但是您可以简单地使用“控件”更改 ButtonStyle 的背景颜色，就像这样： color: control.pressed ？ "#f00" : (control.hovered||control.activeFocus ? "#0f0" : "#00f")

【参考方案1】：

回答您的问题，您应该定义公共财产，例如：

Button 
    id: root

    property color backgroundColor: pressed ? 'skyblue' 
                                            : mousearea.entered ? "lightsteelblue" 
                                                                : "#2e2e2e"
    ...

    MouseArea  id: mousearea; ... 

    style: ButtonStyle 
        background: Rectanlge  color: root.backgroundColor; ... 
    

然后使用 is 属性覆盖默认实现。

但是，

您正在尝试以完全错误的方式使用样式。 Style 是Control 状态的直观表示，不应在运行时手动更改。因此，正确的方法是将控件属性绑定到样式（例如使用属性control）。

style: ButtonStyle 
    background: Rectangle 
         color: control.hovered ? 'lightsteelblue' 
                                : 'skyblue'
    

【参考方案2】：

您可以在不使用样式的情况下实现类似的效果，方法是在按钮内嵌套一个矩形，然后使用 onHoveredChanged 属性修改不透明度。下面是一个例子。我这样做是为了避免与普通按钮样式的悬停效果冲突。

Button  
   text: "Push me"
   Rectangle 
      id: myRectId 
      anchors.fill: parent 
      anchors.margins: 1 
      color: "green" 
      opacity : .2 
    
    onHoveredChanged: hovered ? myRectId.opacity = 0 : myRectId.opacity = .2; 
 

这最终看起来像这样：