QML实现-按钮点击变色功能

最新推荐文章于 2025-04-11 07:00:00 发布

原创最新推荐文章于 2025-04-11 07:00:00 发布 · 7.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#import

QT开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用QML编写的简单按钮示例，演示了如何通过MouseArea组件实现按钮的鼠标悬停和点击交互效果，并设置了不同的状态来改变按钮颜色。

import QtQuick 1.0
Rectangle {
    width:400
    height:400


    Rectangle {
        id:btn
        width: 122
        height: 30
        color: "red"
        Text {
            text: "Welcome to China"
        }
        MouseArea {
            anchors.fill: parent
            //onClicked: btn.state == 'clicked' ? btn.state = "" : btn.state = 'clicked';      
            onContainsMouseChanged: btn.state == 'clicked' ? btn.state = "" : btn.state = 'clicked';

        }
        states: [
            State {
                name: "clicked"
                PropertyChanges { target: btn; color: "blue" }
            }
        ]
    }

onContainsMouseChanged是MouseArea中的响应方法，关于QML中的元素查询，官方地址：
http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeelements.html