若该文为原创文章,未经允许不得转载
原博主博客地址:https://blog.csdn.net/qq21497936
原博主博客导航:https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78522816
各位读者,知识无穷而人力有穷,要么改需求,要么找专业人士,要么自己研究
目录
前话
基类Item介绍
紧接上半场
Methods
红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等)持续更新中...(点击传送门)
本学章节笔记主要详解Item元素(上半场主要涉及anchors锚,本篇章是讲解剩下的item属性和methods),因为所有可视化的界面元素都继承于Item,熟悉Item后,不同的继承子类,有其定制的属性(从几个到几十个不等)。
基类Item是所有可视化子类的父类,它不是可见的,但是它定义了所有通用元素通用的属性,比如x、y、width、height、anchoring和handingsuppourt。
antialiasing : bool [可读写][抗锯齿,主要用于Rectange和基于图像的元素的抗锯齿功能,缺省为false,开启会增加内存和可能较慢的渲染]
Item {
Rectangle {
width: 100;
height: 100;
color: "red";
rotation: 15
}
Rectangle {
x: 120;
width: 100;
height: 100;
color: "red";
antialiasing: true;
rotation: 15
}
}
Item {
Rectangle {
width: 100;
height: 100;
color: "gray";
Rectangle {
x: 5;
y: 5;
id: rec1;
width: 90;
height: 90;
color: "blue";
Rectangle {
id: child1;
x:0; y:0; width:40; height:40;
}
Rectangle {
id: child2;
x:50; y:0; width:40; height:40;
}
Rectangle {
id: child3
x:0; y:50; width:40; height:40;
}
Rectangle {
id: child4;
x:50; y:50; width:40; height:40;
}
}
Component.onCompleted: {
console.log("rec1.childrenRect.x = " + rec1.childrenRect.x);
console.log("rec1.childrenRect.y = " + rec1.childrenRect.y);
console.log("rec1.childrenRect.width = " + rec1.childrenRect.width);
console.log("rec1.childrenRect.height = " + rec1.childrenRect.height);
}
}
}
Item {
Rectangle {
width: 100;
height: 100;
color: "gray";
Rectangle {
x: 5;
y: 5;
id: rec1;
width: 90;
height: 90;
color: "blue";
clip: true;
Rectangle {
id: child1;
x:0; y:0; width:40; height:120;
color: "black";
}
}
}
}
Rectangle {
width: 100; height: 100
TextInput {
id: input
focus: true
}
}
Rectangle {
width: 100; height: 100
FocusScope {
id: scope
// focus: true // 去掉则不能获取焦点
TextInput {
id: input
focus: true
}
}
}
Item {
property alias icon: image.source
property alias label: text.text
implicitWidth: text.implicitWidth + image.implicitWidth
implicitHeight: Math.max(text.implicitHeight, image.implicitHeight)
Image { id: image }
Text {
id: text
wrapMode: Text.Wrap
anchors.left: image.right; anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
}
}
ShaderEffectSource.ClampToEdge - GL_CLAMP_TO_EDGE both horizontally and vertically
ShaderEffectSource.RepeatHorizontally - GL_REPEAT horizontally, GL_CLAMP_TO_EDGE vertically
ShaderEffectSource.RepeatVertically - GL_CLAMP_TO_EDGE horizontally, GL_REPEAT vertically
ShaderEffectSource.Repeat - GL_REPEAT both horizontally and vertically
Rectangle {
color: "blue"
width: 100; height: 100
Rectangle {
color: "green"
width: 25; height: 25
scale: 1.5
}
Rectangle {
color: "red"
width: 25; height: 25;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.verticalCenter: parent.verticalCenter;
}
Rectangle {
color: "yellow"
x: 60; y: 60; width: 25; height: 25
scale: 0.5
}
}
Rectangle {
id: root;
width: 100; height: 100;
state: "red_color"; // state缺省无状态
states: [
State {
name: "red_color";
PropertyChanges { target: root; color: "red" }
},
State {
name: "blue_color"
PropertyChanges { target: root; color: "blue" }
}
]
MouseArea {
anchors.fill: parent;
onClicked: {
if(parent.state == "blue_color") {
parent.state = "red_color";
}else{
parent.state = "blue_color";
}
}
}
}
Rectangle {
Rectangle {
id: rect
width: 200; height: 200
color: "red"
MouseArea {
id: mouseArea
anchors.fill: parent
}
states: State {
name: "moved"; when: mouseArea.pressed // 当鼠标按下时,x,y移动到50,50;松开鼠标会自动回去
PropertyChanges { target: rect; x: 50; y: 50 }
}
transitions: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
}
}
}
变换原点如下图:
Rectangle{
Image {
source: "1.png";
opacity: 0.5;
}
Image {
source: "1.png";
transformOrigin: Item.BottomRight; // 本元素的右下角作为变化原点
rotation: 45;
opacity: 0.6;
}
}
Item {
transitions: [
Transition {
//...
},
Transition {
//...
}
]
}
childAt(real x, real y)
返回该项坐标系统中在点(x,y)处找到的第一个可见子项。如果没有这样的项,则返回null。
object contains(point point)
如果该项包含在本地坐标中的该点,则返回true;否则返回false。
用给的理由强制锁定焦点在该元素,该方法设置重点项目,确保在对象层次结构中的所有祖先FocusScope对象也给予重点关注。
此方法在Qt 5.1引入。
这是一个重载函数。
强制活动焦点在该元素上。
该方法设置焦点在元素上,确保在对象层次结构中的所有祖先FocusScope对象也给予焦点。焦点的改变的原因是:Qt::OtherFocusReason。使用重载方法指定焦点以便更好地处理焦点更改。
映射参数item的坐标系统点(x,y)到本元素坐标系统,并返回一个对象的x和y匹配映射坐标属性。
如果参数item是一个空值,这个映射后得到的是从根QML视图坐标系的点或矩形。
映射参数item的坐标系统矩形(x, y, width,height)到本元素坐标系统,并返回一个对象的(x,y,width和height)匹配映射坐标属性。
如果参数item是一个空值,这个映射后得到的是从根QML视图坐标系的点或矩形。
映射本元素项目的坐标系统矩形(x, y, width,height)到参数item的坐标系统,并返回一个对象的(x,y,width和height)匹配映射坐标属性。
如果项目是一个空值,这个地图的点或直接到根QML视图坐标系统。
映射本元素项目的坐标系统矩形(x, y, width,height)到参数item的坐标系统,并返回一个对象的(x,y,width和height)匹配映射坐标属性。
如果项目是一个空值,这个地图的点或直接到根QML视图坐标系统。
返回位于该项旁边的焦点链中的项。如果转发是true,或者不提供,则它是转发方向的下一项。如果前向是false,则它是向后方向的下一项。
此方法在Qt 5.1引入。
原博主博客地址:https://blog.csdn.net/qq21497936
原博主博客导航:https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78522816