1. 可视组件
1.01 Item
1. QML中的所有可视项目都继承自tem。虽然Item本身没有可视化的外观,但是它定义了可视化项目的所有属性.如:
关于位置的x和y属性、关于大小的width和height属性、关于布局的anchors相关属性、关于按键处理的Keys属等。
2. Item拥有一个 visible属性,将其设置为false可以隐藏项目,该属性默认值为true。
1. Item 作为容器，对项目分组
2. Item中有一个children属性和一个resources属性,children前者包含了可见的孩子的列表,resources含了不可见的资源。
3. Item中还有一个data默认属性,它允许在一个项目中将可见的孩子和不可见的资源自由混合。
4. Item有一个opacity属性,可以用来设置透明度。该属性可以设置为在0.0(完全透明)和1.0(完全不透明)之间的数字,默认值为1.0。
opacity是一个继承属性,透明度也会应用到子项目上。
5. Item拥有一个z属性,可以用来设置兄弟项目的堆叠顺序。默认的堆叠顺序为0。
拥有较大z属性值的项目会绘制在比其z属性值小的兄弟项目之上。拥有相同的z属性值的项目会以出现的顺序由下向上绘制。
如果项目的z属性值为负值,那么会被绘制在父项目的内容的下面。
6. 定位子项目和坐标映射：
（1）Item 中提供了 childAt(realx,realy)函数来返回在点(x，y)处的子项目,如果没有这样的项目则返回 null。
（2）mapFromItem(Item item,real x，real y)函数会item坐标系统中的点(x，y)映射到该项目的坐标系统上,返回一个包含映射后的x和y属性的对象。如果item被指定为null值,那么会从根QML视图坐标系统上的点进行映射。
（3）mapToItem(Itemitem，realx，real y)函数,它与mapFromItem()是很相似的,只不过是从当前项目坐标系统的(x，y)点映射到item的坐标系统而已。
1.02 Rectangle
1. Rectangle项目用来使用纯色或者渐变来填充一个区域,也经常用来存放其他项目。
2. 使用color属性指定一个纯色来填充。
3. 使用gradient属性指定一个Gradient元素定义的渐变来填充。
既使用了color 又使用了gradient,那么最终gradient生效。
4. 可以为一个矩形添加一个可选的边界,并通过 border.color和border.width为其指定颜色和宽度。
5. 使用radius 属性来产生一个圆角的矩形,这样会使矩形的角产生弧形边缘,为了使其更为圆滑。
6. 使用smooth属性可以提高外观表现,不过这是以损失染性能为代价的,所以建议在运动的矩形中不要设置该属性,而只在静态的矩形中进行设置。
1.03 Text
1. 没有明确指定高度和宽度,Text会尝试确定需要多大的空间并依此来设置。
2. 没有使用wrapMode属性设置换行,那么所有的文本将会放置在单行上。
3. 使用elide属性,它可以为超出宽度的文本提供自动省略(使用“…”来表示省略)。
Column {
spacing: 20
Text {width:200; text: '使用文本在单行中对于超出部分不要进行省略'}
Text {width:200; elide:Text.ElideLeft; text: '使用文本在单行中对于超出部分从左边进行省略'}
Text {width:200; elide:Text.ElideMiddle; text: '使用文本在单行中对于超出部分从中间进行省略'}
Text {width:200; elide:Text.ElideRight; text: '使用文本在单行中对于超出部分从右边进行省略'}
}
4. Text支持的HTML子集是有限的,并且,如果在文本中包含HTML的img标签来加载远程的图片，那么文本会被重载。
5. Text提供了只读的文本,如果要使用可编辑的文本,需要使用 TextEdit 元素。
6. Text中的horizontalAlignment和verticalAlignment分别用来设置文本在 Text项目区域中的水平对齐方式和垂直对齐方式。
7. Text的style属性可以来设置文本的样式,支持的文本样式有Text.Normal、Text,Outline、Text.Raised和Text.Sunken。
8. Text的wrapMode属性可以实现文本的自动换行。只有在明确设置了 Text的 width属性时换行才会起作用：
Text.NoWrap(默认):不进行换行;
Text.WordWrap:在单词边界进行换行;
Text.WrapAnywhere:只要达到边界,则会在任意点进行换行,甚至是在一个单词的中间;
Text.Wrap:如果可能,会尽量在单词边界进行换行,否则,会在任意点换行。
9. Text 中提供了一个 Text::onLinkActivated(string link)处理器,它会在用户单击文本中嵌人的一个链接时被调用。
Rectangle {
width: 100; height: 100;
Text {
textFormat: Text.RichText
text: "Url is at <a href = \" http://www.baidu.com\">百度</ a>"
onLinkActivated:console.log(link + " link activated" )
}
}
1.04 TextEdit
1. TextEdit项目用来显示一块可编辑的、格式化的文本。
2. TextEdit与Qt中的QTextEdit很相似,既可以显示纯文本也可以显示富文本。
3. focus属性设置为true,这样可以使TextEdit项目来接收键盘焦点。
注意,TextEdit没有为用户界面提供滚动、光标跟随或者其他的行为。一般是使用Flickable元素来提供滚动实现光标跟随。
----------------------------------------------------
Flickable {
id: flick
width: 300; height: 200;
contentWidth: edit.paintedWidth
contentHeight: edit.paintedHeight
clip: true
function ensureVisible(r)
{
if (contentX >= r.x)
contentX = r.x;
else if (contentX+width <= r.x+r.width)
contentX = r.x+r.width-width;
if (contentY >= r.y)
contentY = r.y;
else if (contentY+height <= r.y+r.height)
contentY = r.y+r.height-height;
}
TextEdit {
id: edit
width: flick.width
height: flick.height
focus: true
wrapMode: TextEdit.Wrap
onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
}
}
----------------------------------------------------
4. TextEdit中通过cut()、copy()和paste()等函数提供了对剪贴板的支持。
5. 可以通过设置selectByMouse属性，启用鼠标进行选取内容的功能。
6. 可以通过使用QML代码来完成内容的选取,这需要设置 selectionStart和selectionEnd,然后使用selectAll()或者selectWord()函数进行操作。
7. 可以通过 openSoftwareInputPanel()和 closeSoftwarelnputPanel()函数分别用来在特定的设备上打开和关闭软键盘。
1.05 TextInput
1. TextInput元素用来显示单行的可编辑的纯文本。TextInput与Qt中的QLineEdit很相似,用来接收一行文本输人
2. 通过设置echoMode可以使得TextInput用来输入密码.
