QMLButton背景初始化

最新推荐文章于 2024-09-24 11:01:36 发布

蓝黑墨水

最新推荐文章于 2024-09-24 11:01:36 发布

阅读量627

点赞数 9

分类专栏： qml学习文章标签： qt

本文链接：https://blog.csdn.net/lanxiaziyi/article/details/136415344

版权

qml学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了在使用Qt构建界面时，遇到Button组件中normalColor变量未定义的错误，并提供了两种解决方法：一是将背景颜色设为固定值，二是将背景初始化放在Component.onCompleted钩子函数中。

摘要由CSDN通过智能技术生成

异常情况

Button {
        id: control
        text: qsTr("Button")
        width: 100
        height: 150
        property color normalColor: "green"
        property color hoverColor: "yellow"
        property color pressColor: "red"
        background: Rectangle {
            id: buttonBg
            color : normalColor
        }


        MouseArea{
            anchors.fill: parent
            hoverEnabled: true

            onEntered: {
                buttonBg.color = control.hoverColor
            }
            onPressed: {
                buttonBg.color = control.pressColor
            }
            onExited: {
                buttonBg.color = control.normalColor
            }
        }
    }

如果这样写会报错。
在这里插入图片描述

 ReferenceError: normalColor is not defined

因为里面 normalColor 是个变量，还没有初始化。

解决办法

一，将背景色改为固定值。

        background: Rectangle {
            id: buttonBg
            color : "green"
        }

二、写到初始化完成之后
也就是将背景初始化放到组件完成之后

Button {
        id: control
        text: qsTr("Button")
        width: 100
        height: 150
        property color normalColor: "green"
        property color hoverColor: "yellow"
        property color pressColor: "red"
        background: Rectangle {
            id: buttonBg
        }
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true

            onEntered: {
                buttonBg.color = control.hoverColor
            }
            onPressed: {
                buttonBg.color = control.pressColor
            }
            onExited: {
                buttonBg.color = control.normalColor
            }
        }

        Component.onCompleted: {
            buttonBg.color = normalColor;
            console.log("Component.onCompleted")
        }
    }