import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
opacity:1
Rectangle{
z:1 //两个层叠控件 通过z轴 调整
x:30
y:30
id:rect1
width:100
height:50
color: "black"
focus:true
//anchors.fill: parent //充满父控件
MouseArea{
anchors.fill:parent
//点击事件
onClicked: {
console.log("on click")
parent.focus
}
}
//捕获键盘return事件
Keys.onReturnPressed: {
console.log("on Return Pressed")
}
}
//通过坐标偏移 获取控件的坐标
Rectangle{
x:rect1.x+rect1.width +20
y:rect1.y
id:rect2
width:100
height:50
color: "blue"
focus:false
}
//通过瞄点 获取控件坐标
Rectangle{
id:rect3
width:100
height:50
color: "blue"
focus:false
anchors.left:rect2.right
anchors.leftMargin: 20
anchors.top: rect2.top
}
//通过瞄点 获取控件坐标
Rectangle{
id:rect4
width:100
height:50
color: "blue"
focus:false
anchors.top:rect1.bottom //获取另外一个控件的底部
anchors.topMargin: 20 //Margin 为控件和控件间隙
anchors.left:rect1.left
}
//通过anchors
Rectangle{
id:rect5
width:100
height:100
color: "blue"
focus:false //是否可以有焦点 无焦点 不能捕获 鼠标事件
scale:0.8 //缩放比 放大比例
rotation: 120 //翻转30°
border.width: 3 //边框线宽
border.color: "black" //边框 颜色
radius:15 //弧度
opacity:1 //透明都
//渐变色
gradient: Gradient{
GradientStop{ position: 0.0; color: "#FFFF0000";}
GradientStop{ position: 0.3; color: "#FFFFA000";}
GradientStop{ position: 0.5; color: "#A0FF4000";}
GradientStop{ position: 1.0; color: "#FF800FFF";}
}
//和父控件对齐方式 居中对齐 等价 anchors.centerIn: parent
anchors.horizontalCenter:parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
qml 知识点 Rectangle的属性1
最新推荐文章于 2024-06-03 10:59:18 发布