QML知识笔记(二)
概述
这次笔记记录的是QML的可视元素,QML使用可视元素来描述图形化用户界面,每个可视元素都是一个对象,具有几何坐标,在屏幕上占据一块显示区域。
Rectangle(矩形)元素
Rectangle{
id:topRect
width: 80
height: 80
x:100
y:100
color:"blue"
rotation:45 //旋转45°
//anchors.fill: parent
radius: 8 //绘制圆角矩形
opacity: 0.6 //设置透明度为60%
scale: 0.8 //缩小为原来的80%
gradient: Gradient{
GradientStop{position:0.0;color:"aqua"}
GradientStop{position:1.0;color:"teal"}
}
}
Image(图像)元素
Image{
width: 1280/4
height: 800/4
anchors.fill: parent
source: ":/new/prefix1/picture.jpg"
fillMode: Image.PreserveAspectCrop //设置图片的填充模式
clip:true
}
Text(文本)元素
Text{
width: 100
height:100
x:30
y:30
color: "black"
font.family: "宋体"
font.pointSize: 20
text: "hello world!"
}
自定义组件
QML可以使用上面的基本元素来自定义出一个元素,以方便复用,将QML元素放置在一个单独的文件中,然后给该文件一个名字,便于用户日后通过这个名字来使用这个组件
//自定义控件
Rectangle{
id:btn
width: 100
height:100
x:50
y:200
color: "pink"
border.color: "aqua"
border.width: 3
Text{
id:label
anchors.centerIn: parent
font.pointSize: 16
text:"开始"
}
MouseArea{
anchors.fill: parent
onClicked:{
label.text = "按钮已经按下"
label.font.pointSize = 11
btn.color = "aqua"
btn.border.color = "teal"
}
}
}