QML学习06Button

QMLx学习06Button

  • 1、Button
    • [1.1 状态改变(checkable)](#1.1 状态改变(checkable))
    • [1.2 排斥性(autoExclusive)](#1.2 排斥性(autoExclusive))
    • [1.3 重复触发(autoRepeat)、第一次触发延时时间(autoRepeatDelay)、相互之间触发的时间间隔(autoRepeatInterval)](#1.3 重复触发(autoRepeat)、第一次触发延时时间(autoRepeatDelay)、相互之间触发的时间间隔(autoRepeatInterval))
    • [1.4 鼠标按下(onDownChanged)](#1.4 鼠标按下(onDownChanged))
    • [1.5 改变按钮背景颜色和边框颜色(background: Rectangle、border.color)](#1.5 改变按钮背景颜色和边框颜色(background: Rectangle、border.color))
  • 2、总结

1、Button

1.1 状态改变(checkable)

cpp 复制代码
    Button {
        id:btn
        width:50
        height:50
        //checkable: true         //按钮被选中状态
        checkable: false

        onCheckableChanged: {
            console.log("changed",checkable)
        }

        onClicked: {
            btn.checkable = !btn.checkable      //可以强制改变checkable状态
        }

1.2 排斥性(autoExclusive)

cpp 复制代码
Button {
    id:btn
    width: 50
    height: 50
    autoExclusive: true   //排斥性,只有一个按钮能被checkable
    checkable: true
}

Button {
    id:btn1
    width: 50
    height: 50
    x:60
    autoExclusive: true
    checkable: true
}

Button {
    id:btn2
    width: 50
    height: 50
    x:120
    autoExclusive: true
    checkable: true
}

1.3 重复触发(autoRepeat)、第一次触发延时时间(autoRepeatDelay)、相互之间触发的时间间隔(autoRepeatInterval)

cpp 复制代码
Button{
    id:btn
    width: 50
    height: 50
    autoRepeat: true            //重复触发
    autoRepeatDelay: 2000       //第一次触发延时时间
    autoRepeatInterval: 1000    //相互之间触发的时间间隔

    onClicked: {
        console.log("clicked")
    }

    onPressed: {
        console.log("pressed")
    }

    onReleased: {
        console.log("released");
    }
}

1.4 鼠标按下(onDownChanged)

cpp 复制代码
Button{
    id:btn
    width: 50
    height: 50
    autoRepeat: true            //重复触发
    autoRepeatDelay: 2000       //第一次触发延时时间
    autoRepeatInterval: 1000    //相互之间触发的时间间隔
    checkable: true

    onDownChanged: {
        console.log("down:",down,"pressed",pressed)         //鼠标按下
    }

}

1.5 改变按钮背景颜色和边框颜色(background: Rectangle、border.color)

cpp 复制代码
Button{
    id:btn
    width: 50
    height: 50
    autoRepeat: true
    background: Rectangle{
        anchors.fill: btn
        color: {
            if(btn.pressed){
                return "green"
            }
            else{
                return "blue"
            }
        }

        border.width: 5
        border.color: {
            if(btn.pressed){
                return "red"
            }
            else{
                return "black"
            }
        }
    }
}

2、总结

|------------------------------------------------------------------------------------------------|
| 以上就是Button的一些基础知识了,浏览过程中,如若发现错误,欢迎大家指正,有问题的欢迎评论区留言或者私信。最后,如果大家觉得有所帮助,可以点一下赞,谢谢大家!祝大家天天开心,顺遂无虞! |

相关推荐
THMOM9119 分钟前
TinyWebserver学习(9)-HTTP
网络协议·学习·http
zhanshuo27 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
讨厌吃蛋黄酥29 分钟前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
1234Wu1 小时前
React Native 接入 eCharts
javascript·react native·react.js
凌辰揽月1 小时前
Servlet学习
hive·学习·servlet
Mr_Xuhhh1 小时前
信号与槽的总结
java·开发语言·数据库·c++·qt·系统架构
魔芋红茶2 小时前
spring-initializer
python·学习·spring
西岭千秋雪_2 小时前
Redis性能优化
数据库·redis·笔记·学习·缓存·性能优化
随便取个六字2 小时前
GIT操作 学习
git·学习
chuanauc2 小时前
Kubernets K8s 学习
java·学习·kubernetes