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

相关推荐
真*小白1 分钟前
Python语法学习篇(三)【py3】
开发语言·python·学习
前端小巷子2 分钟前
JS打造“九宫格抽奖”
前端·javascript·面试
lingggggaaaa8 分钟前
小迪安全v2023学习笔记(八十二讲)—— Java组件安全&Solr&Shiro&Log4j&CVE复现
笔记·学习·安全
不一样的故事12615 分钟前
学习Python是一个循序渐进的过程,结合系统学习、持续实践和项目驱动,
开发语言·python·学习
菜菜子爱学习35 分钟前
系统架构设计师——【2025年上半年案例题】真题分享(一)
学习·系统架构·软考·系统架构设计师
一只乔哇噻38 分钟前
java后端工程师进修ing(研一版‖day44)
java·开发语言·学习·算法
~kiss~1 小时前
MLLM学习~M3-Agent如何处理视频:视频clip提取、音频提取、抽帧提取和人脸提取
学习
Ares-Wang1 小时前
Vue3》》eslint Prettier husky
开发语言·javascript·ecmascript
EveryPossible1 小时前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说1 小时前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas