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.3
import QtQuick.Controls 1.2
Rectangle{
    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 Text"
        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.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4
Rectangle{
    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都会适时更新。然后根据状态进行加载不同的提示界面。