常见元素
● 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元素都可以使用,如图所示:
QT QUICK QML 菜鸡教程:
● QT Quick QML入门笔记(一)应用程序结构分析和QML基础
● QT Quick QML入门笔记(四)锚(anchors)布局