qml基本元素学习

参考网址： http://www.w3school.com.cn/jsref/jsref_random.asp

https://www.w3.org/TR/css-color-3/#svg-color

qml描述了用户界面元素的形状和行为。qml中子元素继承了父元素的坐标系统。

import QtQuick 2.8

Rectangle {

id: root

width: 120;

height: 240

color: "#D8D8D8"

Image {

id: rocket

x: ( parent.width - width)/2;

y: 40

source: 'assets/rocket.png'

}

Text {

y: rocket.y + rocket.height + 20

width: root.width

horizontalAlignment: Text.AlignHCenter

text: 'Rocket'

}

}

import：声明导入一个指定模块版本

每一个qml文件都需要一个根元素: Rectangle{},其标识符id：可是任意标识符

元素拥有属性，其属性值都是使用name:value的格式来赋值

qml元素可嵌套，子元素可以受用parent来访问父元素

qml元素属性：

一个元素属性有一个类型定义，且需要一个初始值。

1.id:在qml文件中用来引用元素，id是一个标识符，一个id在一个qml文档中是唯一的。

2.属性能设置一个值，且此值依赖于其类型。未赋值的属性会有默认值

3.属性绑定：一个属性可以依赖其他属性，当其他属性改变的时候，此属性的值也会变化。

4.添加自定义的属性需要使用property修饰符，然后跟上属性的类型，属性名和属性的值。属性名不能重复

使用default修饰的属性为默认属性

5.属性别名：alias 属性别名不需要类型，其使用引用的属性类型或对象类型

6.text属性

7.按组分配的属性L：一个属性需要结构化的

8.属异姓是元素自身的附加属性

9.对于每个元素都可以提供一个信号操作。

qml文档提供动态作用域机制，后加载的文档会覆盖之前加载的文档的元素id号。这样可引用未被覆盖的元素id。

类似于全局变量。

qml的属性绑定与js的赋值是不同的，绑定是一个协议存在整个生命周期，js的赋值只产生一次效果

qml基本元素：

基本原色（Item）
这些元素在可视化元素中都是可用的，且工作方式相同，一般用作其他元素的容器
分组	属性
Geometry(几何属性)	x,y(坐标)定义元素左上角的位置 width元素宽 height元素长 z 堆叠次序，元素之间的重叠顺序， z值大的元素显示在上面
Layouthandling(布局操作)	anchors(锚定) left right top bottom (vertical center) (horizontal center) margin间距
Key handling(按键操作)	key(按键) keyNavigation(按键定位) focus(焦点)
Transformation(转换)	scale 缩放 rotate 旋转 transformOrigin旋转基点
visual可视化	opacity 不透明度(0-1) visible 是否可见 clip裁剪，限制元素边界绘制 smooth平滑，提高渲染质量
state definition 状态定义	states 状态属性列表 提供元素当前支持的状态列表 transition(转变)定义状态转变动画
矩形框元素(Rectangle)
是基本元素的宽展，支持颜色填充，边界定义
color	填充颜色
gradient	渐变色(一个渐变色由一系列梯度颜色定义)，每一个值定义了一个位置和对应颜色，0表示顶，1表示底部GradientStop表示一个倾斜点
颜色的命名来自svg颜色名称： https://www.w3.org/TR/css-color-3/#svg-color 也可使用rgb字符串(#ff44444)
border.color	边界颜色
border.width	边界宽度
radius	半径，用来创建圆角矩形
矩形示例：Rectangle { id : rect1 x :0; y :0 width : 96; height : 96 gradient : Gradient { GradientStop { position : 0.0; color : "red" } GradientStop { position : 0.5; color : "green" } GradientStop { position : 1.0; color : "blue" } } radius : 48 opacity : 0.5 // color: "blue" border.width : 4 border.color : "yellow" }
文本元素(Text)
text元素只显示文本，不渲染背景。背景是透明的。文本的初始宽度与高度依赖于文本字符和字体，初始宽度0。元素间的对齐要使用锚定
text	字符串类型的文本属性
font	字体属性组，字体字号，加粗等字体相关属性都在此属性组
style/styleColor	文字外框效果，浮雕或者凹陷鲜果，若文字
elide	如果文字过长可以使用省略号，此属性运行设置省略号的位置，文本左，中，右
wrapMode	文字换行方式显示所有文本，(此属性只在设置了宽度后才生效)
horizontalAlignment verticalAlignment	文本在元素内部的边界对齐
Text示例：Text { id : tx1 x :0; y :100 text : qsTr ( "the qml simple writed by gaoy" ) color : "#000000" font.family : "Ubuntu" font.pixelSize : 50 elide : Text .ElideMiddle style : Text .Sunken styleColor : "red" verticalAlignment : Text .AlignBottom }
图像元素(Image)
图像元素可以显示不同格式图像png jpg gif等。图像元素可以使用PreserveAspectCrop来避免裁剪图像数据被渲染到图像边界外。默认此clip是关闭的需要clip:true开启
source	图像文件的来源，链接信息，rul可以是本地路径也可以是网络连接
fillmode	控制图像大小调整
图像示例 Image { x :80; y :200 source : "rocket.png" height : 118/2 width : 48 fillMode : Image .PreserveAspectCrop clip : true }
鼠标区域元素(MouseArea)
是矩形不可视元素，可以通过此区域捕捉鼠标事件。
Onclicked	指定鼠标点击动作

qml组件：

组件就是一个可重复使用的元素。

组件创建方式这里介绍一个：一个以文件为基础的组件在文件中创建了qml元素，并且将文件以元素类型来命名。之后就可像基本元素那样使用此组件。qml组件类似与面向对象的类的定义，在定义组件的时候需要注意的是， 只有根级目录的属性才能够被其他文件所访问;另外可以使用alias别名将内部属性导出；另外如果组件的qml文件与main.qml在同一目录下可直接调用此组件，否则需要使用该组件的文件中使用import来导入此组件声明。

使用示例： 调用示例：

简单转换

qml元素转换：

平移:x,y坐标属性完成

旋转:改变rotation(0-360)

缩放:改变scale来完成 scale<1 缩放 scale>1放大

ClickableMage元素：包含鼠标区域的图像元素

为了获得较好的显示效果，建议在缩放的时候使用已经缩放的图片进心替换。否则过量的放大活导致图片模糊

示例：

定位元素

定位器：qml中用于放置元素对象的元素，qml提供Row Column Grid Flow等定位器

色块：代码都如下不过是对颜色值进行了修改

Rectangle{

width:48; height: 48

color: "#ea7025"

border.color: Qt.lighter( color)

// Qt.lighter(color)是基于填充色的边界高亮

}

column：列定位 是将加入定位元素中的元素按照加入顺序进行 列排列显示而已。下图代码部分的DarkCube就是图中的黑框，不过就是一个底色设置黑色的矩形而已

Row：行定位 是将加入定位元素中的元素按照加入顺序进行 行排列显示而已。下图代码部分的DarkCube就是图中的黑框，不过就是一个底色设置黑色的矩形而已

Grid：网格定位 是将加入定位元素中的元素按照加入顺序以及确定的行数和列数进行 网格排列显示而已。下图代码部分的DarkCube就是图中的黑框，不过就是一个底色设置黑色的矩形而已

Flow：流定位 是将加入定位元素中的元素按照加入顺序以及确定的行数和列数进行 流排列显示而已。下图代码部分的DarkCube就是图中的黑框，不过就是一个底色设置黑色的矩形而已。在下图中 layoutDirection决定了对象加入的方向，其可取值，下图也有提示

Repeater重复元素与定位器一起使用：重复元素与for循环或者迭代器是一致的。

下图中定义了一个自定义的颜色数组，此处对于此颜色数组的首字符不能大写，大写的话报错应该是重名

重复元素Repeater在创建的时候需要制定model的个数。下面关于随机色块的选取还是用了js的Math.random()函数此函数的具体

使用查看文头的网址即可

布局元素

qml使用锚定对元素进行布局。anchoring是基础元素对象的基本属性，可被所有可视化qml元素使用。锚定是相对布局。元素的6条锚定线如下图：

元素的6条锚定线：top顶，bottom底 left 左 right右 horizontalCenter水平中 verticalCenter垂直中；在文本元素中只有一条锚定基线baseline 。 top顶，bottom底 left 左 right右也叫边距；horizontalCenter水平中 verticalCenter垂直中，基线baseline也叫偏移值。

元素填充父元素	anchors.fill:parent
元素左对齐父元素	anchors.left:parent.left
元素左边对齐父元素右边	anchors.left:parent.right
元素中间对齐	anchors.horizontalCenter:parent.horizontalCenter
元素在父元素内居中	anchors.centerIn:parent.centerIn
元素水平居中对齐父元素，并向后偏移12像素；垂直方向居中	anchors.horizontalCenter:parent.horizontalCenter anchors.horizontalCenteroffset:12 anchors.verticalCenter:parent.verticalCenter

输入元素

TextInput文本输入

仅仅允许用户输入一行文本，此元素支持使用正则表达式来限制输入。示例：

TLineEdit.qml

另外对于文本输入元素的焦点切换：

对于焦点的切换在直接使用TextInput的时候可以直接使用 KeyNavigation.tab: 其他的TextInput 。

在对TextInput进行了二次封装后，在单纯使用 KeyNavigation.tab: 其他的TextInput 已经不能完成焦点切换。这时候需要向上图一样创建焦点区域FocusScope.

焦点区域：如果焦点区域接收到焦点，则此焦点区域中的最后一个使用(focus:true)子元素接收焦点。详细使用样例如上图

TextEdit文本编辑

不再支持文本输入的正则表达式限制，但是支持了已绘制文本大小查询(paintedHeight,paintedWidth,),同样可以使用焦点区域来切换焦点，其与TextInput输入非常类似，示例如下，不再详述

按键元素

就是在qml对键盘的某些按键的响应，具体不描述，见实例：

上述代码实现，点击 up,down,left right 可以上，下，左，右平移方块 使用+ -可以实现方块缩放，使用shift ctrl实现旋转。