import QtQuick 2.0
Text{
id: label
x: 24; y: 24
property int spacePresses: 0
text: "Space pressed: " + spacePresses + "times"
onTextChanged: console.log("text changed to: ",text);
focus: true
Keys.onSpacePressed: {
increment()
}
Keys.onEscapePressed: {
label.text = ''
}
function increment(){
spacePresses = spacePresses + 1
}
}
/***************************************************************************************************************/
// 几个基础的可视化元素:Rectangle,Text,Image,MouseArea
//所有可视化元素共有的属性
几何属性: x, y, width, height, z
布局操作: anchors, 包括left, right, top, bottom, verticalCenter, horizontalCenter, margins
按键操作: Keys, KeyNavigation, 处理输入焦点focus可用操作
转换: scale, rotate, transform, transformOrigin
可视化:Opacity, visible, clip, smooth
状态定义:states(状态列表属性),Transition(转变属性列表)
/***************************************************************************************************************/
Rectangle{
id: rect1
x: 12; y: 12
width: 76; height: 96
color: "lightsteelblue"
}
Rectangle{
id: rect2
x: 112; y: 12
width: 76; height: 96
border.color: "lightsteelblue"
border.width: 4
radius: 8
}
Rectangle{
id: rect3
x: 12; y: 12
width: 176; height: 96 //若无宽高将不可见
gradient: Gradient{
GradientStop{
position: 0.0; color: "lightsteelblue"
}
GradientStop{
position: 1.0; color: "slategray"
}
}
border.color: "slategray"
}
/***************************************************************************************************************/
Text{
text: "The quick brown fox"
color: "#303030"
font.family: "Ubuntu"
font.pixelSize: 28
}
Text{
width: 40; height: 120 //不设置将不可见
text: 'A very long text'
elide: Text.ElideMiddle
style: Text.Sucken
styleColor: '#FF4444' //文字的外框效果
verticalAlignment: Text.AlignTop
//when no elide mode
//wrapMode: Text.WordWrap
}
/***************************************************************************************************************/
Image{
x: 12; y: 12
//width: 48; height: 118
source: "assets/rocket.png"
}
Image{
x: 112; y: 12
width: 48
height: 118/2
source: "assets/rocket.png"
fillMode: Image.PreserveAspectCrop //避免剪裁图像数据被渲染到图像边界外
clip: true //默认情况剪裁是禁用的
}
//可使用QQmlImageProvider,通过C++代码来创建自己的图像提供器,它允许你动态创建图像并使用线程加载
/***************************************************************************************************************/
Rectangle{
id: rect1
x: 12; y: 12
width: 76; height: 96
color: "lightsteelblue"
MouseArea{
id: area
width: parent.width
height: parent.height
onClicked: rect2.visible = !rect2.visible
}
}
Rectangle{
id: rect2
x: 112; y: 12
width: 76; height: 96
border.color: "lightsteelblue"
border.width: 4
radius: 8
}
/***************************************************************************************************************/
组件:QML提供几种不同的方法来创建组件,先对一种方法进行讲解:一个文件就是一个基础组件。一个以文件为基础的组件在文件中创建了
一个QML元素, 并且将文件以元素类型来命名,你可以像在任何其他的QtQuick模板中使用元素一样来使用这个组件。
//alias,可以将内部嵌套的QML元素的属性导出到外面使用,只有根级目录的属性才能够被其他文件的组件访问
//Button.qml
import QtQuick 2.0
Item{
id: root
Rectangle{
anchors.fill: parent
property alias text: label.text
signal clicked
width: 116; height: 26
color: "lightsteelblue"
border.color: "stategrey"
Text{
id: label
anchors.centerIn: parent
text: "State"
}
MouseArea{
anchors.fill: parent
onClicked: {
root.clicked()
}
}
}
}
Button{ //Component
id: button
x: 12; y:12
text: "Start"
onClicked:{
status.text = "Button clicked!"
}
}
Text{
id: status
x: 12; y: 76
width: 116; height: 26
text: "waiting ..."
horizontalAlignment: Text.AlignHCenter
}
/***************************************************************************************************************/
简单的转换:
//ClickableImage 仅仅是一个包含鼠标区域的图像元素
//ClickableImage.qml
import QtQuick 2.0
Image{
id: root
signal clicked
MouseArea{
anchors.fill: parent
onclicked: root.clicked()
}
}
//transformation.qml
import QtQuick 2.0
Item{
width: bg.width
height: bg.height
Image{
id: bg
source: "assets/background.png"
}
MouseArea{
id: backgroundClicker
anchors.fill: parent
onClicked: {
rocket1.x = 20
rocket2.rotation = 0
rocket3.rotation = 0
rocket3.scale = 1.0
}
}
ClickableImage{
id: rocket1
x: 20; y: 100
source: "assets/rocket.png"
onClicked: {
x += 5
}
}
ClickableImage{
id: rocket2
x: 20; y: 100
source: "assets/rocket.png"
onClicked: {
rotation += 5
}
}
ClickableImage{
id: rocket3
x: 240; y: 100
source: "assets/rocket.png"
smooth: true //由于性能的原因通常是关闭的
onClicked: {
rotation += 5
scale -= 0.05
}
}
}//文档中元素的顺序很重要
/***************************************************************************************************************/
定位器: Row, Column, Grid, Flow
//RedSquare.qml
import QtQuick 2.0
Rectangle{
width: 48
height: 48
color: "#ea7025"
border.color: Qt.lighter(color) ; //darker()
}
//column.qml
import QtQuick 2.0
DarkSquare{
id: root
width: 120
height: 240
Column{ //从上到下
id: column
anchors.centerIn: parent
spacing: 8
RedSquare{}
GreenSquare{width: 96}
BlueSquare{}
}
}
//row.qml
import QtQuick 2.0
BrightSquare{
id: root
width: 400; height: 120
Row{
id: row
anchors.centerIn: parent
spacing: 20
BlueSquare{}
GreenSquare{}
RedSquare{}
}
}
//Grid: 若只指定行或列,会根据子项目总数来自动计算另一元素
//grid.qml
import QtQuick 2.0
BrightSquare{
id: root
width: 160
height: 160
Grid{
id: grid
rows: 2
columns: 2
anchors.centerIn: parent
spacing: 8
RedSqure{}
GreenSquare{}
BlueSquare{}
RedSquare{}
}
}
//flow和layoutDirection属性控制流的方向
//flow.qml
import QtQuick 2.0
BrightSquare{
id: root
width: 160
height: 160
Flow{
anchors.fill: parent //也可设置宽高
anchors.margins: 20
RedSquare{}
BlueSquare{}
GreenSquare{}
}
}
//通常Repeater与定位器一起使用, 它的工作方式就像for循环与迭代器的模式一样
//repeater.qml
DarkSquare{
id: root
width: 252
height: 252
property variant colorArray: ["#00bde3","#67c111","#ea7025"]
Grid{
anchors.fill: parent
anchors.margins: 8
spacing: 4
Repeater{
model: 16
Rectangle{
width: 56; height: 56
property int colorIndex: Math.floor(Math.random()*3)
color: root.colorArray[colorIndex]
border.color: Qt.lighter(color)
Text{
anchors.centerIn: parent
color: "#f0f0f0"
text: "Cell" + index
}
}
}
}
}
/***************************************************************************************************************/
布局元素:
GreenSquare{ //子元素覆盖父元素,子元素不可拖拽
BlueSquare{
width: 12
anchors.fill: parent
anchors.margins: 8
text: '(1)'
}
}
GreenSquare{ //子元素在父元素内部的左侧,只能垂直方向拖拽
BlueSquare{
width: 48
y: 8
anchors.left: parent.left
anchors.leftMargin: 8
text: '(2)'
}
}
GreenSquare{ //子元素在父元素右侧
BlueSquare{
width: 48
anchors.left: parent.right
text: '(3)'
}
}
GreenSquare{ //父元素内两个子元素竖直排列
BlueSquare{
id: blue1
width: 48; height: 24
y: 8
anchors.horizontalCenter: parent.horizontalCenter
}
BlueSquare{
id: blue2
width: 72; height: 24
anchors.top: blue1.bottom
anchors.topMargin: 4
anchors.horizontalCenter: blue1.horizontalCenter
text: '(4)'
}
}
GreenSquare{
BlueSquare{
width: 48
anchors.centerIn: parent //子元素在父元素中居中
text: '(5)'
}
}
GreenSquare{ //子元素在父元素中垂直居中,水平居中向右偏移12像素,子元素不可拖拽
BlueSquare{
width: 48
anchors.horizontalCenter: parent.horizontalCenter
anchors.horizontalCenterOffset: -12
anchors.verticalCenter: parent.verticalCenter
text: '(6)'
}
}
/***************************************************************************************************************/
输入元素: //TextInput, TextEdit
//textinput.qml
import QtQuick 2.0
Rectangle{
width: 200
height: 800
color: "linen"
TextInput{
id: input1
x: 8; y: 8
width: 96; height: 20
focus: true
text: "Text Input 1"
}
TextInput{
id: input2
x: 3; y: 38
width: 96; height: 20
text: "Text Input 2"
}
}
//用户可以通过点击TextInput来改变焦点,为了支持键盘Tab改变焦点,可以利用KeyNavigation这个属性
//textinput2.qml
Rectangle{
width: 200
height: 80
color: "linen"
TextInput{
id: input1
x: 8; y: 8
width: 96; height: 20
focus: true
text: "Text Input 1"
KeyNavigation.tab: input2
}
TextInput{
id: input2
x: 8; y: 36
width: 96; height: 20
text: "Text Input 2"
KeyNavigation.tab: input1
}
}
//TLineEditV1.qml
import QtQuick 2.0
Rectangle{
width: 96; height: input.height + 8
color: "lightsteelblue"
border.color: "gray"
property alias text: input.text
property alias input: input //导出元素
TextInput{
id: input
anchors.fill: parent
anchors.margins: 4
focus: true
}
}
//若用此组件来重写上例,会发现使用Tab无法将焦点切换到input2上?
//因为焦点被转移到input2时,包含TLineEditV1的顶部元素接收了这个焦点并没有转发给TextInput
//为了解决这个问题,QMl提供了FocusScope(焦点区域)
//TLineEditV2.qml
import QtQuick 2.0
FocusScope{
width: 96; height: input.height + 8
color: "lightsteelblue"
border.color: "gray"
property alias text: input.text
property alias input: input
TextInput{
id: input
anchors.fill: parent
anchors.margins: 4
focus: true
}
}
//使用:
Rectangle{
...
TLineEditV2{
id: input1
...
}
TLineEditV2{
id: input2
...
}
}
//TTextEdit.qml
import QtQuick 2.0
FocusScope{
width: 96; height: 96
Rectangle{
anchors.fill: parent
color: "lightsteelblue"
border.color: "gray"
}
property alias text: input.text
property alias input: input
TextEdit{
id: input
anchors.fill: parent
anchors.margins: 4
focus: true
}
}
//textedit.qml 使用组件
import QtQuick 2.0
Rectangle{
width: 136; height: 120
color: "linen"
TTextEdit{
id: input
x: 8; y: 8
focus: true
text: "Text Edit"
}
}
/***************************************************************************************************************/
按键元素Keys:
//keys.qml
import QtQuick 2.0
DarkSquare{
width: 400; height: 200
GreenSquare{
id: square
x: 8; y: 8
}
focus.true
Keys.onLeftPressed: square.x -= 8
Keys.onRightPressed: square.x += 8
Keys.onUpPressed: square.y -= 8
Keys.onDownPressed: square.y += 8
Keys.onPressed:{
switch(event.key){
case Qt.Key_Plus:
square.scale += 0.2
break;
case Qt.key_Minus:
square.scale -= 0.2
break;
}
}
}