QML Color and Images

Colors:可以用三种方式来设置：

• 直接用一个颜色名字的字符串来表示：例如 "red","blue"",lightblue"…
• 直接用一个6位的十六进制字符串来表示：例如#ff00ff，六位中每两位代表三原色中 的一种，其顺序为红绿蓝。
• 使用一个函数来进行设置。如：Qt.rgba(0, 0.75, 0 , 1)。其中四个参数的范围应该 都在0到1之间。前三个参数表示三原色，后一个参数表示不透明度。

三种方法的实例：

import QtQuick 1.1 
Item{
    width:150;  height: 50
    Rectangle{
        width:50; height: 50
        color: "red"
    }
    Rectangle{
        x:50 ; y:0
        width: 50 ; height:50;
        color: "#00ff00"
    }
    Rectangle{
        x:100 ; y: 0
        width: 50 ; height: 50;
        color:Qt.rgba(0,0,1,1)
    }
}

Images

可以看下面一个关于图像的实例，这个实例将呈现一幅图片，并且在点击图片的时候会将图片放大两倍并以右下角为轴心旋转45度。

import QtQuick 1.1
Rectangle {
    width: 200 ; height: 200
    color: "gray"
   Image{
       anchors.centerIn: parent
       source: "../捕获.PNG"
       transformOrigin: Item.Center
       MouseArea{
           anchors.fill: parent
           onClicked: {
               parent.scale=2
               parent.rotation=45
           }
       }
   }
}

Image的长宽由图像决定。其路径用source来设定，可以用绝对路径也可以使用相对路径，当然网路图片也是可以的。”../”表示父级目录。用scale来设定放大的倍数，用tansformOrigin 来设定旋转的轴心。rotation可以用来设定旋转的度数。

Gradient

实例：

import QtQuick 1.1
Rectangle {
    width: 200 ; height: 400
    gradient: Gradient{
        GradientStop{
            position: 0.0
            color: "blue"
        }
        GradientStop{
            position: 1.0
            color:  "black"
        }
    }
}

如上例所示，可以用一个gradient属性来设置渐变。用Gradient来作为其值。Gradient可以包含一个或更多的GradientStop 。每一个GradientStop包含一个position属性和一个color属性。position属性的值，只能从0到1。

设置gradient属性后，color属性将被覆盖掉。

官方推荐使用渐变的图片来代替gradient，因为gradient会占用大量的cpu，并且渐变的效果可能并没有你期望的那么生动。