QML之可视化元素

1、Item

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

    import Qt 4.7Item{ 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.yafeilinux.com/?p=592 介绍的很详细。哈哈。谢谢这个网站，我在里面学了很多qt相关的知识

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