从零开始学习qml(四)——按钮功能
美好的事情正在发生
前言
我们继续开始今天的学习。今天用qml的按钮。
从零开始学习qml(一)的连接:https://blog.csdn.net/weixin_37997214/article/details/109752388
从零开始学习qml(二)的连接:https://blog.csdn.net/weixin_37997214/article/details/109754591
从零开始学习qml(三)——按钮、弹窗的连接:https://blog.csdn.net/weixin_37997214/article/details/109827940
从零开始学习qml(四)——各个控件简介(QtQuick.Controls 1)的链接(包含其他控件):https://blog.csdn.net/weixin_37997214/article/details/109863955
欢迎转载,转载请注明出处。本文链接:https://blog.csdn.net/weixin_37997214/article/details/110456092
目录
目录
一、今天学什么
废话不多说,今天实现按钮的功能(点击按钮、按钮样式、不规则形状按钮)。
二、上图
1.实现效果
2.详细步骤
2.1创建一个按钮
Button{
id:firstButton //名称
x:100 //位置
y:100
width: 80
height: 36
text: "Button" //文字
onClicked: //点击槽函数
{
secondButton.checkable=true
color="lightblue"
}
}
2.2创建一个按钮,并添加样式
Button {
id:secondButton //名
x:100
y:200
width: 80
height: 36
text: "B button"
checkable:true //按钮是否可以被点击
style: ButtonStyle { //按钮的样式
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1 //边框宽度(是否焦点)
border.color: "#888" //边框颜色
radius: 4 //边框弧度
gradient: Gradient {
GradientStop { position: 0 ; color: control.hovered ? "Lightgreen" : "Lightblue" } //渐变色实现、鼠标滑过样式实现
GradientStop { position: 1 ; color: control.hovered ? "Lightyellow" : "Lightblue" } //渐变色实现、鼠标滑过样式实现
}
}
}
}
2.3不规则按钮
圆形
Button {
id:imageButton
x:100
y:300
width: 50
height: 50
style: ButtonStyle {
background: Rectangle {
Image{source: "qrc:/new/prefix1/MyImage.png"} //背景图片
color:"transparent" //背景透明(注意没有border)
radius: 2
}
}
}
运行效果如下:
总结
本章介绍了一下qml按钮的一些实现。