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

相关推荐
DanB2438 分钟前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode10 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~10 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
iFulling10 小时前
【计算机网络】第四章:网络层(上)
学习·计算机网络
香蕉可乐荷包蛋11 小时前
AI算法之图像识别与分类
人工智能·学习·算法
肥or胖11 小时前
【FFmpeg 快速入门】本地播放器 项目
开发语言·qt·ffmpeg·音视频