QT Quick QML入门笔记（三）常见元素

---

所有的热爱都要不遗余力，真正喜欢它便给它更高的优先级，和更多的时间吧！

QML其它文章请点击这里:     QT QUICK QML 学习笔记

---

姊妹篇:    

● QT Quick QML入门笔记（一）应用程序结构分析和QML基础

● QT Quick QML入门笔记（二）信号与槽

● QT Quick QML入门笔记（四）锚(anchors)布局

● QT Quick QML入门笔记（五）处理鼠标和键盘事件

---

常见元素

● Window/ApplicationWindow
● Item
	1). Text               //文字
	2). Button             //按键
	3). Image              //图片
	4). Rectangle          //矩形框
	5). TextInput          //输入框

代码实例

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

///常用元素
Window {
    visible: true;
    width:  480;
    height: 320;

    //1).
    Text {
        id: txt;
        y: 100;
        text: "I am a text";
        color: "red";
        font.pixelSize: 24;  //像素大小
        rotation : 45;       //文本旋转45°
    }

    //2).
    Button {
        id: btn;
        text: "A Button";
        onClicked: {
            console.log("clicked");      //输出日志
            txt.text = "button clicked"; //修改文字
        }
    }

    //3).
    Rectangle {
        id : rect
        x:200;
        y:200;
        height: 35             //需要指定高宽
        width: 210
        color: "green";
        border.width: 2;
        border.color: "blue";
        radius: 8;            //圆角

        //4).
        TextInput {
            id: phoneNuber;
            width: 200;
            height: 30;
            focus: true;   //与Rectangle相结合，需给焦点
            x: 4;          //相对于父的x. y偏移
            y: 4;
         }
    }

    //5).
    Image {
        x: 185;
        y: 10;
        width: 100;
        height: 100;
        //本地图片：
        source:  "file:///D:/Qt/qt_quick_qml/无人机.png";
        fillMode: Image.PreserveAspectFit; //按比列填充，不会变形
    }
}

运行结果

注意：

● QML中一个对象或者Item，既可以调用本身的属性，也可以调用基类的属性
Text、Button 这些都“Item”的派生类，所以说Item的属性和方法，Text、Button元素都可以使用，如图所示：

---

QML其它文章请点击这里:     QT QUICK QML 学习笔记