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