本文主要介绍QML中一些组件的基本用法,如Rectangle、 Text、Button、 BusyIndicator、Image
Rectangle主要用来显示一个矩形,可以设置边框的颜色,填充颜色等属性,常用的主要属性如下:
下面是一个简单的Rectangle的示例,QML文件内容如下
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
id: mainWindow
visible: true
width: 800
height: 600
Rectangle {
id: mainRect
//anchors.centerIn: parent
x: (mainWindow.width - mainRect.width) / 2
y: (mainWindow.height - mainRect.height) / 2
width: 400
height: 400
property var interval: 5
color: 'red'
//color: '#FF0000'
//color: Qt.rgba(255, 0, 0)
border.color: 'blue'
border.width: 4
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 1.0; color: "blue" }
}
radius: 10
}
}
关于QML中的颜色可以用如下几种方式,如要显示红色
Gradient 为渐变的组件,GradientStop 表示渐变设置的点,position属性表示位置,取值范围为0~1之间。
可以在QML中直接使用Keys来响应键盘的按键。有pressed(KeyEvent event)、 released(KeyEvent event)、returnPressed(KeyEvent event)等事件, 详细的可查看Keys的说明文档。下面是一个按键的简单示例
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
id: mainWindow
visible: true
width: 800
height: 600
Rectangle {
id: mainRect
//anchors.centerIn: parent
x: (mainWindow.width - mainRect.width) / 2
y: (mainWindow.height - mainRect.height) / 2
width: 400
height: 400
property var interval: 5
color: 'red'
//color: '#FF0000'
//color: Qt.rgba(255, 0, 0)
border.color: 'blue'
border.width: 4
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 1.0; color: "blue" }
}
radius: 10
focus: true
Keys.enabled: true
Keys.onPressed: {
if (event.key === Qt.Key_Up)
mainRect.y -= mainRect.interval
else if (event.key === Qt.Key_Down)
mainRect.y += mainRect.interval
else if (event.key === Qt.Key_Left)
mainRect.x -= mainRect.interval
else if (event.key === Qt.Key_Right)
mainRect.x += mainRect.interval
event.accepted = true
}
}
}
上面的QML添加了对按键处理,实现的功能为按方向键,可以移动界面显示的矩形。效果如下:
Text主要用来显示文本文字,包括纯文本和富文本等。主要常用的属性如下:
下面是一个简单的示例:
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
id: mainWindow
visible: true
width: 800
height: 600
Rectangle {
id: mainRect
width: 400
height: 400
border.width: 1
anchors.centerIn: parent
clip: true
Column {
Text {
style: Text.Normal
styleColor: "red"
font.pixelSize: 30
text: 'Normal Style'
}
Text {
style: Text.Raised
styleColor: "red"
font.pixelSize: 30
text: 'Raised Style'
}
Text {
style: Text.Outline
styleColor: "red"
font.pixelSize: 30
font.bold: true
text: 'Outline Style'
}
Text {
style: Text.Sunken
styleColor: "red"
font.pixelSize: 30
font.italic: true
text: 'Sunken Style'
}
}
}
}
效果如下:
Button可以显示一个按钮,text属性为按钮显示的文字,点击按钮时发送clicked信号,下面是一个关于按钮的简单示例:
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
Window {
id: mainWindow
visible: true
width: 800
height: 600
property var number: 0
Text {
function updateText() {
mainText.text = mainWindow.number.toString()
}
id: mainText
anchors.centerIn: parent
text: ''
color: 'red'
font.pixelSize: 30
Component.onCompleted: {
updateText()
}
}
Button {
id: addButton
text: '增加'
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
anchors.right: subButton.left
anchors.rightMargin: 10
onClicked: {
mainWindow.number++
mainText.updateText()
}
}
Button {
id: subButton
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
anchors.right: parent.right
anchors.rightMargin: 10
text: '减小'
onClicked: {
mainWindow.number--
mainText.updateText()
}
}
}
程序运行效果如下:
Image的source属性可以指定图片的来源, 可以为本地文件、网络文件、资源文件,本地文件需要添加file:///, 资源文件添加qrc:/;fillMode为图片的填充样式; 其他的属性及其相应的说明可以见QML的说明文档。
BusyIndicator为一个Busy指示器,running属性为该指示器的运行状态
下面为一个简单的示例,
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
Window {
id: mainWindow
visible: true
width: 800
height: 600
Column {
spacing: 20
anchors.fill: parent
BusyIndicator {
id: busy
running: true
}
Image {
id: image
source: 'qrc:/image/pic1.jpg'
}
}
}
程序运行效果如下: