目录
接着昨天.在来学点QML的空间.
Rectangle控件:
今天第一个空间就是Rectangle(矩形),这个控件本来没什么好说的,就是画个矩形,
Rectangle{
x: 100
y: 100
z:1
width: 100
height: 50
color:"black"
}
Rectangle{
x: 120
y: 120
width: 100
height: 50
color:"blue"
}
如果要是两个矩阵重合了怎么办,其实还有第三个坐标z,默认z是0,如果设置z为1,就是z大的在上.
focus属性:
这个属性是获取当前焦点的.
Rectangle{
x: 100
y: 100
z:11
width: 100
height: 50
color:"black"
focus:true
//activeFocus:
MouseArea{
anchors.fill:parent
onClicked:{
console.log("on clicked")
}
}
Keys.onReturnPressed:{
console.log("on clicked")
}
}
当把focus这个属性设置为true就可以获取这个矩形控件的焦点.如果单击这个矩形就会触发打印 on clicked,下面这段代码.
MouseArea{
anchors.fill:parent
onClicked:{
console.log("on clicked")
}
当键盘获取矩形的焦点按下回车也会触发 打印 on clicked
下面代码:
Keys.onReturnPressed:{
console.log("on clicked")
}
当focus设置为false或者没有就不会获取焦点,上面两个操作也就没有了.
锚点:
Rectangle
{
id:rect1
width: 100
height: 50
color: "black"
}
Rectangle
{
x:rect1.width + 20
id:rect2
width: 100
height: 50
color: "black"
}
结果:
通过锚点实现:
Rectangle
{
id:rect1
width: 100
height: 50
color: "black"
}
Rectangle
{
id:rect2
width: 100
height: 50
color: "black"
anchors.left: rect1.right
anchors.leftMargin: 20
}
// Re
anchors.left: rect1.right rect2的左边等于rect1的右边
anchors.leftMargin: 20 左边间隔20
矩形居中与父控件:
Rectangle
{
id:rect2
width: 100
height: 50
color: "black"
anchors.centerIn: parent
}
当然水平和垂直都可以.
旋转属性rotation:
旋转30度
Rectangle
{
id:rect2
width: 100
height: 50
color: "black"
rotation: 30
}
放缩属性scale:
Rectangle
{
id:rect2
x:100
y:100
width: 100
height: 50
color: "black"
rotation: 30
scale: 2
}
设置矩形的边控border:
Rectangle
{
id:rect2
x:100
y:100
width: 100
height: 50
color: "black"
rotation: 30
scale: 2
border.width: 2
border.color:"red"
}
矩形圆角弧度 radius:
Rectangle
{
id:rect2
x:100
y:100
width: 100
height: 50
color: "black"
rotation: 30
scale: 2
border.width: 2
border.color:"red"
radius: 15
}