网站软件应用大全网站建设任务
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:"r1"x:0y:0//z:1color:"red"}Rectangle{width: 50height: 50id:b2objectName:"r2"x:30y:20color:"yellow"}
}
与锚定布局相关的布局属性
anchors.top:锚定项目的顶部，一般让其等于父亲的某个位置
anchors.left:锚定项目的左部，一般让其等于父亲的某个位置
anchors.bottom:锚定项目的底部，一般让其等于父亲的某个位置
anchors.right:锚定项目的右部，一般让其等于父亲的某个位置
anchor.XXXMargin：XXX可以由以上几个替代，表示项目的外边距，与qss盒模型类似
anchor.fill / anchor.centerIn:以充满父类的方式布局/居中显示于父组件
anchors.horizontalCenter/anchor.verticalCenter:组件的水平中心位置和垂直位置，可以使用offset来进行细微调整
示例1：label的水平中心位置位于pic的水平中心位置，label的顶部位于pic的底部，label的顶部偏移量为5。
示例2：label的left位于pic的右边，左偏移量为5。
其他一些属性
antialiasing : bool 是否抗锯齿，选择抗锯齿会增加内存
children : list<Item> 当前项目的所有子项列表
clip : bool 默认为false,当为true时，项目会裁切自己的绘画
focus : bool 是否获得焦点，获得焦点之后的项目可以捕获鼠标和按键事件
opacity :real 当前项目的透明度，取值为[0.0,1.0]
parent :Item 当前组件的父组件
rotation:real 当前组件的旋转属性
scale：real 当前组件的缩放属性
smooth : bool是否做平滑处理
visible:bool 当前组件是否可视
示例：放大和旋转。
Window {visible: truewidth: 400height: 400title: qsTr("Hello World")Rectangle{width: 50height: 50id:r1objectName:"r1"x:0y:0z:1color:"red"}Rectangle{width: 50height: 50id:r2objectName:"r2"x:200y:50color:"yellow"scale: 2 // 长和宽放大一倍rotation: 45 //旋转45度}
}
示例：设置圆角
Rectangle{width: 50height: 50id:r2objectName:"r2"x:200y:50color:"yellow"scale: 2 // 长和宽放大一倍rotation: 45 //旋转45度radius:10 //设置 圆角半径}
示例：设置渐变色
Rectangle{width: 50height: 50id:r2objectName:"r2"x: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: "lightsteelblue"property string endColor: "blue"width: 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:"red"endColor:"yellow"}WRectangle{x:200y:100startColor:"black"endColor:"red"}
}
运行截图：
