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

相关推荐
大春儿的试验田6 分钟前
高并发收藏功能设计:Redis异步同步与定时补偿机制详解
java·数据库·redis·学习·缓存
Mintopia37 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖41 分钟前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
金色光环1 小时前
【Modbus学习笔记】stm32实现Modbus
笔记·stm32·学习
醇醛酸醚酮酯1 小时前
Qt项目锻炼——TODO清单(二)
开发语言·数据库·qt
THMOM911 小时前
TinyWebserver学习(9)-HTTP
网络协议·学习·http
zhanshuo2 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html