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

Question

下面是我的 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 获取元素？或者我们是否有其他方法来改变鼠标进入时的背景颜色。

Answer 1

回答您的问题，您应该定义公共(public)属性(property)，例如:

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 状态的可视化表示，不应在运行时手动更改。因此，正确的方法是将控件属性绑定(bind)到样式(例如使用属性 control )。

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