珠海酒店网站建设,唐山市建设网站,深汕特别合作区属于哪个区,类wordpress1.Item和Rectangle
Item类型是Qt Quick中所有可视项的基本类型。
Qt Quick中的所有可视项都继承Item。尽管Item对象没有视觉外观#xff0c;但它定义了视觉项中常见的所有属性#xff0c;例如x和y位置、宽度和高度、锚定和键处理支持。
Rectangle继承自Item#xff0c;多…1.Item和Rectangle
Item类型是Qt Quick中所有可视项的基本类型。
Qt Quick中的所有可视项都继承Item。尽管Item对象没有视觉外观但它定义了视觉项中常见的所有属性例如x和y位置、宽度和高度、锚定和键处理支持。
Rectangle继承自Item多了下面几种属性
antialiasing : bool //抗锯齿
border //边框
border.width : int
border.color : color
color : color //颜色
gradient : Gradient //渐变
radius : real //圆角半径
2.常用属性
与位置大小相关
width:组件的宽度
height:组件的高度
x:组件的x位置坐标如果有嵌套则子类是相对于父类的坐标定义屏幕左上角为(0,0),X轴向右为正Y向下为正
y:组件的y位置坐标如果有嵌套则子类是相对于父类的坐标定义屏幕左上角为(0,0),X轴向右为正Y向下为正
implicitHeight:定义项目的隐式高度一般用在未显示指定项目宽高的时候有些项目是有隐式宽高的
implicitWidth:定义项目的隐式宽度一般用在未显示指定项目宽高的时候有些项目是有隐式宽高的
z:项目的z序z序越大表示项目越顶层
示例下图可见r2在r1的上层将r1给盖住了。如果需要将r1置为上层只需添加z属性z:1。
Window {visible: truewidth: 400height: 400title: qsTr(Hello World)Rectangle{width: 50height: 50id:b1objectName:r1x:0y:0//z:1color:red}Rectangle{width: 50height: 50id:b2objectName:r2x:30y:20color:yellow}
} 与锚定布局相关的布局属性
anchors.top:锚定项目的顶部一般让其等于父亲的某个位置
anchors.left:锚定项目的左部一般让其等于父亲的某个位置
anchors.bottom:锚定项目的底部一般让其等于父亲的某个位置
anchors.right:锚定项目的右部一般让其等于父亲的某个位置
anchor.XXXMarginXXX可以由以上几个替代表示项目的外边距与qss盒模型类似
anchor.fill / anchor.centerIn:以充满父类的方式布局/居中显示于父组件
anchors.horizontalCenter/anchor.verticalCenter:组件的水平中心位置和垂直位置可以使用offset来进行细微调整
示例1label的水平中心位置位于pic的水平中心位置label的顶部位于pic的底部label的顶部偏移量为5。 示例2label的left位于pic的右边左偏移量为5。 其他一些属性
antialiasing : bool 是否抗锯齿选择抗锯齿会增加内存
children : listItem 当前项目的所有子项列表
clip : bool 默认为false,当为true时项目会裁切自己的绘画
focus : bool 是否获得焦点获得焦点之后的项目可以捕获鼠标和按键事件
opacity :real 当前项目的透明度取值为[0.0,1.0]
parent :Item 当前组件的父组件
rotation:real 当前组件的旋转属性
scalereal 当前组件的缩放属性
smooth : bool是否做平滑处理
visible:bool 当前组件是否可视
示例放大和旋转。
Window {visible: truewidth: 400height: 400title: qsTr(Hello World)Rectangle{width: 50height: 50id:r1objectName:r1x:0y:0z:1color:red}Rectangle{width: 50height: 50id:r2objectName:r2x:200y:50color:yellowscale: 2 // 长和宽放大一倍rotation: 45 //旋转45度}
} 示例设置圆角 Rectangle{width: 50height: 50id:r2objectName:r2x:200y:50color:yellowscale: 2 // 长和宽放大一倍rotation: 45 //旋转45度radius:10 //设置 圆角半径} 示例设置渐变色 Rectangle{width: 50height: 50id:r2objectName:r2x:200y:50scale: 2 // 长和宽放大一倍rotation: 45 //旋转45度radius:10 //设置 圆角半径gradient: Gradient {GradientStop { position: 0.0; color: lightsteelblue }GradientStop { position: 1.0; color: blue }}} 3.自定义Rectangle
创建一个WRectangle.qml内容如下可以修改渐变色的开始和结束颜色
import QtQuick 2.0Rectangle {id:rectproperty string startColor: lightsteelblueproperty string endColor: bluewidth: 100height: 100rotation: 45 //旋转45度radius:10 //设置 圆角半径gradient: Gradient {GradientStop { position: 0.0; color: startColor }GradientStop { position: 1.0; color: endColor }}
}使用
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1Window {visible: truewidth: 400height: 400title: qsTr(Hello World)WRectangle{x:100y:100startColor:redendColor:yellow}WRectangle{x:200y:100startColor:blackendColor:red}
}运行截图
