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; //按比列填充，不会变形
    }
}