QML之可视化元素

1、Item

      所有的QML可视化元素都继承自Item。Item没有可视化界面，但是它定义了可视化元素的所有属性。

   

import Qt 4.7
Item{
    width: 500;height: 400
    Image{
        source: "images/qt.png"
    }
    Image {
        x: 80
        y: 100
        source: "images/qt.png"
    }
    Image {
        x: 190
        width: 100;height: 100
        fillMode: Image.Tile
        source: "images/qt.png"
    }
}
//记住要为Item指定width和height不然运行看不到窗体

 

    按键事件：

Item {
    width: 200; height: 100
    focus: true
    Keys.onPressed: {
        console.log(event.key);
        console.log(Qt.Key_Left);
        if(event.key == Qt.Key_Left){
            console.log("move left");//控制台打印信息
            event.accepted = true;
        }
    }
     Keys.onSelectPressed: console.log("Selected");
     Keys.onDigit0Pressed: console.log("0 Pressed");
}
//Keys事件还有很多具体可以查API，onSelectPressed，我现在也不知道怎么触发，希望有朋友知道告诉我。

Item以及继承自它的元素的大多数属性，当属性值变化会有一个信号发射出去。

 

2、Rectangle

   

Rectangle {
    width: 100
    height: 100
    color: "white"
    border.color: "#FF12FF"
    border.width: 10
    radius: 10
    Rectangle {
        anchors.fill :parent
        anchors.margins: 10
        color: "red"
        clip: true
        Rectangle {
            anchors.fill: parent
            border.width: 1
        }
    }
}
//注：color的值不能用16进制0x******表示

 

Rectangle{
    width: 400; height: 300
    Rectangle {
        width: 80; height: 80
        color:  "lightsteelblue"
        radius: 8
    }
    Rectangle {
        y: 100; width: 80; height: 80
        gradient: Gradient {
            GradientStop {position: 0.0; color: "lightsteelblue"}
            GradientStop {position: 1.0; color: "blue"}
        }
        radius: 8
    }
    Rectangle {
         y: 200; width: 80; height: 80
         rotation: 90
         gradient: Gradient {
             GradientStop { position: 0.0; color: "lightsteelblue" }
             GradientStop { position: 1.0; color: "blue" }
         }
         radius: 8
     }
}

Gradient顾名思义，即梯度，也就是我们常说的逐变色。一个gradient 被两个或更多的颜色定义混合形成。颜色可以从位置0.0到1.0逐渐变化，如：

Rectangle {
     width: 100; height: 100
     gradient: Gradient {
         GradientStop { position: 0.0; color: "red" }
         GradientStop { position: 0.33; color: "yellow" }
         GradientStop { position: 1.0; color: "green" }
     }
 }

Gradient包含一个属性:stops:list<GradientStop>

GradientStop元素仅包含两个属性color:color和position:real

 

3、AnimatedImage

      此元素是用于播放动画像gif这样存储着帧的文件

      

import Qt 4.7
Rectangle {
    width: animation.width; height: animation.height + 8
    AnimatedImage { id: animation; source: "animation.gif" }
    Rectangle {
        property int frames: animation.frameCount
        width: 4; height: 8
        x: (animation.width - width) * animation.currentFrame / frames
        y: animation.height
        color: "red"
    }
}

 

 

4、TextInput

       做过界面开发的应该都知道这就是个单行文本框.它有很多丰富的属性

     

TextInput {
    id: textInput
    text: "Hello world!"
    width: 200;
    height: 20;
    activeFocusOnPress: false
    selectionColor: "#00FF00"
    selectByMouse: true
    echoMode: TextInput.Password
    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (!textInput.activeFocus) {
                textInput.forceActiveFocus()
                textInput.openSoftwareInputPanel();
            } else {
                textInput.focus = false;
            }
        }
        onPressAndHold: textInput.closeSoftwareInputPanel();
    }
}

 

5、TextEdit

       多行文本框.

6、Image

      上面已用到过了，就是普通显示图片的元素

7、Text

       通常就是用作一个标签，在界面上显示信息.

8、BorderImage

      用来做窗口的边界。

     http://www./?p=592 介绍的很详细。哈哈。谢谢这个网站，我在里面学了很多qt相关的知识

9、除了上面介绍这些之外QML还提供了三个验证器，分别是IntValidator,DoubleValidator,RegExpValidator