QML学习之基本元素Rectangle, Text, Button，Image介绍

本文主要介绍Rectangle, Text, Button, Image的基本属性和一般应用。

1) Rectangle

    使用时需要引用 import QtQuick 2.5

    width用来指定宽，height用来指定高。

    color属性可以指定填充颜色，而gradient属性则用来设置渐变色供填充使用，如果同时指定了color和gradient，那么gradient生效; 如果你设置color属性为transparent，那么就可以达到只绘制边框不填充的效果。

    a)颜色，关于颜色值，在QML中可以使用颜色名字，如blue, red, green, transparent等，也可以使“#RRGGBB”或者“#AARRGGBB”来指定，还可以使用Qt.rgba(), Qt.lighter()等方法来构造。详情请参考Qt帮助的“QML Basic Type: color”页面。

    b)渐变色 渐变色通过两个或多个颜色值来指定，QML会自动在你指定的颜色之间插值，进行无缝填充。Gradient使用GradientStop来指定一个颜色值和它的位置(取值在0.0与1.0之间)。

    border.width用来指定边框的宽度，border.color:指定边框颜色。

      设置readius属性可绘制圆角矩形。

一个Rectangle的简单例子。

Rectangle{    width: 640    height: 480    color:"green"    border.color: "red"    border.width: 2    radius:  12    gradient: Gradient{        GradientStop{            position: 0.0            color: "red"        }        GradientStop{            position: 0.50            color: "green"        }        GradientStop{            position: 1.0            color: "blue"        }    }}

2) Text

       使用时需要引用import QtQuick 2.5

       Text元素可以表示纯文本或者富文本(使用HTML标记修饰的文本)。它有font, text,color, elide, textFormat, wrapMode, horizontalAlignment, verticalAlignment等属性，可以通过这些属性来决定Text如何显示文本。可以直接通过textFormat来指定其属性。当不指定textFormat属性时，Text会默认使用Text.AutoText，自动检测文本是纯文本还是富文本。

       Text元素的style属性提供了几种风格:Text.Outline, Text.Raised, Text.Sunken，可以使文字显示特别的效果。而styleColor属性可以和style配合使用(如果没有指定style,则styleColor不生效)，比如 style为Text.Outline时，styleColor就是文字轮廓的颜色。

import QtQuick 2.3import QtQuick.Controls 1.2Rectangle{    width: 640    height: 480    color :"green"    Text{        id:normal        width:  150        height: 100        wrapMode: Text.WordWrap        font.bold: true        font.pixelSize: 24        font.underline: true        text: "Hello Blue <font color=\"red\">Text</font>"        anchors.centerIn: parent    }    Text{        id:outline        anchors.left: normal.left        anchors.top: normal.bottom        anchors.topMargin: 4        font.pixelSize: 24        text: "A Test Tool!"        style: Text.Outline        styleColor: "red"    }}        

3) Button

    使用时需要引用 import QtQuick.Controls 1.4

    text属性指定按钮文字。

    checkable属性设置Button是否可选。如果Button可选，checked属性则保存Button选中状态。

    iconName属性定图标的名字。Button就可以加载并显示平台的图标主题中存在的该名字对应的资源。         i           iconSource则通过URL的方式来指定icon的位置。iconName属性的优先级高于iconSource。

    isDefault属性指定按钮是否为默认按钮，如果是默认的(true)，用户按Enter键就会触发按钮的clicked()信号。

    pressed属性保存了按下的状态。

    menu属性允许你给按钮设置一个菜单(此时按钮可能会出现一个小小的下拉箭头)，用户点击按钮时会弹出菜单。默认为null。

    action属性允许你设定按钮action,  action可以定义按钮的checked, text, tooltip,iconSource等属性，还可以绑定按钮的clicked信号。action属性的默认值为null。

    activeFocusOnPress属性指定按钮被按下时是否获取焦点，默认是false。

    style属性用来定制按钮的风格，与它配套的有一个ButtonStyle类，允许你定制按钮的背景和文本。要使用ButtonStyle,需要引用 import QtQuick.Controls.Styles 1.4

ButtonStyle类有background, control, label三个属性。background属性的类型是Component, 用来绘制Button的背景。label属性的类型也是Component，用于定制按钮的文本。control属性指向使用ButtonStyle的按钮对象，用于访问按钮的各种状态。 这里我们简单地使用Rectangle来定制按钮。通过使用style 属性指定一个ButtonStyle 对象来设定Button d的风格，为background 属性指定一个Rectangle 对象来定义按键的高度和宽度。（control是实际按键的引用）

import QtQuick 2.3import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.4Rectangle{    width: 640    height: 480    //color :"green"    Button{        text:"Pressed"        anchors.centerIn: parent        style: ButtonStyle{            background: Rectangle{            implicitWidth: 80            implicitHeight: 60            border.width: control.press?4:2            border.color: (control.hovered||control.pressed)?"blue":"green"        }    }    onClicked: {        console.log("The button is pressed!")    }}}

对于ButtonStyle，如果有多个按钮同时用到我们就可以使用Component在QML文档内定义一个组件，设置其id属性的值为btnStyle,然后再Button中设定style属性时直接使用btnStyle.

Rectangle{    width: 640    height: 480     //color :"green"    Component{        id: btnStyle         ButtonStyle{            background: Rectangle{            implicitWidth: 80            implicitHeight: 60             border.width: control.press?4:2            border.color: (control.hovered||control.pressed)?"blue":"green"            }        }    }     Button{        text:"pressed"        anchors.centerIn: parent        style: btnStyle onClicked: {        console.log("The button is pressed!")         }    }}

4)Image

       Image可以静态地显示一个图片，只要是Qt支持的，比如 JPG,  PNG, BMP, GIF, SVG等都可以显示。对于GIF等格式，只会把第一帧显示出来。如果要显示动画，则可以使用AnimatedSprite或者Animatedlmage。 

       Image的width和height属性来设定图元的人小，如果没有设置它们Image会使用图片本身的尺寸。此时fillMode属性可以设置图片的填充模式，它支持Image.Stretch(拉伸)、Image.PreserveAspectFit(等比缩放), Image.PreserveAspectCrop(等比缩放，最大化填充Image,必要时裁剪图片)、Image.Tile(在水平和垂直两个方向平铺)、Image.TileVertically(垂直平铺)、Image.TileHorizontally(水平平铺)、Image.Pad(保持图片原样不做变换)等模式。

       Image默认阻塞式地加载图片，如果图片分辨率很高或者设计需要可以设置asynchronous为true来开启异步加载模式。cache属性设置为false,Image不用缓存图片。此时会单独开一个线程来加载图片，此时可以显示一个等待的小图标。然后当status的值为Image.Ready时再隐藏加载等待的小图标。

        Image支持网络加载图片。它的source属性是url,支持任意一种网络协议，自动启用异步加载模式。此时progress(取值范围是0.0~1.0)、status都会适时更新。然后根据状态进行加载不同的提示界面。