本文通过一个具体的示例展示了QtQuick和QML的应用，包括界面布局、组件创建及交互设计等，适合初学者了解QML的基本用法。
这篇我们来挖一个坑，做一些没用的东西，一切之前，本篇只为只为演示和介绍Qt quick的效果和QML如何使用，不考虑代码质量，其实中间的大部分代码是可以复用的，不过对于初学的我们，还需要多多研究，OK废话不多说，先看效果：
桌面效果：
android效果：
换页：（第二页比较坑，不过都说了，这是没用的东西，只为看效果。就这么简单，呵呵）
什么都不说了，直接上代码：
1.
//main.qml
001.
import QtQuick 2.0
002.
import QtQuick.Controls 1.1
003.
import QtQml.Models 2.1
004.
import "main" //注1
005.
//import "main" as Main //注2
006.
/**
007.
* 因为我创建的项目是一个QtQuick.Controls项目
008.
* 所以它的主界面必须ApplicationWindow
009.
*/
010.
ApplicationWindow {
011.
height: 480
012.
width: 320
013.
//如果是注2，则直接用Main.Main{},注1直接用下面方法
014.
Rectangle {//创建一个主页顶部区域组件
015.
id: topTab
016.
anchors.top: parent.top//处于父元素的顶部
017.
width: parent.width//继承父元素的宽
018.
height:50
019.
color: "#ccc"
020.
Rectangle {//描边
021.
height: 1
022.
color: "white"
023.
anchors.top: parent.top
024.
anchors.left: parent.left
025.
anchors.right: parent.right
026.
}
027.
Rectangle {//描边
028.
height: 1
029.
color: "white"
030.
anchors.top: parent.top
031.
anchors.topMargin: 1
032.
anchors.left: parent.left
033.
anchors.right: parent.right
034.
}
035.
gradient: Gradient {//渐变
036.
GradientStop { position: 0 ; color: "white" }
037.
GradientStop { position: 1 ; color: "#ccc" }
038.
}
039.
Text{
040.
anchors.verticalCenter: parent.verticalCenter
041.
anchors.horizontalCenter:parent.horizontalCenter
042.
font.pixelSize: 25
043.
color:"brown"
044.
text: "欢迎使用QML"
045.
}
046.
}
047.
//这里我们就要去Main.qml里面看了
048.
Main{
049.
id: mainView
050.
anchors.fill: parent //大小为父组建的大小
051.
anchors.topMargin: 50//从距离顶部40的地方开始描边
052.
anchors.bottomMargin:40//同上，距离底部
053.
//当组建创建完成来运行一段js代码，用Component.onCompleted{}
054.
Component.onCompleted: {
055.
//调用了Main.qml里面的js方法属性 addItem(),它要求3个参数，name,desc,url
056.
addItem("示例", "这里是一个示例", Qt.resolvedUrl("gridview/gridview-example.qml"))
057.
addItem("示例", "这里是一个示例", Qt.resolvedUrl("gridview/gridview-example.qml"))
058.
addItem("示例", "这里是一个示例", Qt.resolvedUrl("gridview/gridview-example.qml"))
059.
addItem("示例", "这里是一个示例", Qt.resolvedUrl("gridview/gridview-example.qml"))
060.
addItem("示例", "这里是一个示例", Qt.resolvedUrl("gridview/gridview-example.qml"))
061.
addItem("示例", "这里是一个示例", Qt.resolvedUrl("gridview/gridview-example.qml"))
062.
addItem("示例", "这里是一个示例", Qt.resolvedUrl("gridview/gridview-example.qml"))
063.
addItem("示例", "这里是一个示例", Qt.resolvedUrl("gridview/gridview-example.qml"))
064.
addItem("示例", "这里是一个示例", Qt.resolvedUrl("gridview/gridview-example.qml"))
065.
}
066.
}
067.
Rectangle {//创建一个主页顶部区域组件
068.
id: bottomTab
069.
anchors.bottom: parent.bottom//处于父元素的顶部
070.
width: parent.width//继承父元素的宽
071.
height:40
072.
color: "#ccc"
073.
Rectangle {//描边
074.
height: 1
075.
color: "white"
076.
anchors.top: parent.top
077.
anchors.left: parent.left
078.
anchors.right: parent.right
079.
}
080.
Rectangle {//描边
081.
height: 1
082.
color: "white"
083.
anchors.top: parent.top
084.
anchors.topMargin: 1
085.
anchors.left: parent.left
086.
anchors.right: parent.right
087.
}
088.
gradient: Gradient {//渐变
089.
GradientStop { position: 0 ; color: "white" }
090.
GradientStop { position: 1 ; color: "#ccc" }
091.
}
092.
Text{
093.
anchors.verticalCenter: parent.verticalCenter
094.
anchors.horizontalCenter:parent.horizontalCenter
095.
font.pixelSize: 20
096.
color:"brown"
097.
text: "流云专属"
098.
}
099.
}
100.
}
代码如下
1.
//Main.qml
001.
import QtQuick 2.0
002.
003.
Rectangle {
004.
color: "black"
005.
//js作为属性
006.
function addItem(name, desc, url)
007.
{
008.
//向id = dataModel的model添加属性
009.
dataModel.append({"name":name, "description":desc, "url":url})
010.
}
011.
ListView {
012.
clip: true
013.
//把id为li的组件作为SimpleLauncherDelegate类的listItem属性传递过去
014.
delegate: SimpleLauncherDelegate{listItem: li}
015.
model: ListModel {id:dataModel}
016.
anchors.fill: parent
017.
}
018.
019.
Item {
020.
id: li
021.
visible: false
022.
clip: true
023.
property url listUrl //自定义了一个属性
024.
property var listTitle: "你好" //定义一个变量
025.
onListUrlChanged:visible = (listUrl == '' ? false : true); //设置显示状态
026.
anchors.fill: parent
027.
anchors.topMargin: 60//在距离顶部60px的地方开始描点，为的是腾出顶部导航的空间
028.
Rectangle {//定义一个矩形区域作为背景
029.
id: bg
030.
anchors.fill: parent
031.
color: "black"
032.
}
033.
MouseArea{
034.
anchors.fill: parent
035.
enabled: li.visible //绑定父元素的可见值
036.
}
037.
Loader{
038.
focus: true
039.
source: li.listUrl
040.
anchors.fill: parent
041.
}
042.
}
043.
Rectangle {
044.
id: bar
045.
visible: li.visible
046.
anchors.top: parent.top
047.
width: parent.width
048.
height: 60
049.
Rectangle {
050.
height: 1
051.
color: "white"
052.
anchors.top: parent.top
053.
anchors.left: parent.left
054.
anchors.right: parent.right
055.
}
056.
057.
Rectangle {
058.
height: 1
059.
color: "white"
060.
anchors.top: parent.top
061.
anchors.topMargin: 1
062.
anchors.left: parent.left
063.
anchors.right: parent.right
064.
}
065.
066.
gradient: Gradient {
067.
GradientStop { position: 0 ; color: "white" }
068.
GradientStop { position: 1 ; color: "#ccc" }
069.
}
070.
071.
MouseArea{
072.
anchors.fill: parent
073.
enabled: li.visible
074.
//Eats mouse events
075.
}
076.
Text{
077.
anchors.verticalCenter: parent.verticalCenter
078.
anchors.horizontalCenter:parent.horizontalCenter
079.
font.pixelSize: 25
080.
color:"brown"
081.
text: li.listTitle
082.
}
083.
Image {
084.
id: back
085.
source: "../images/navigation_previous_item.png"
086.
anchors.verticalCenter: parent.verticalCenter
087.
anchors.verticalCenterOffset: 2
088.
anchors.left: parent.left
089.
anchors.leftMargin: 10
090.
091.
MouseArea {
092.
id: mouse
093.
hoverEnabled: true
094.
anchors.centerIn: parent
095.
width: 38
096.
height: 31
097.
anchors.verticalCenterOffset: -1
098.
onClicked: li.listUrl = ""
099.
Rectangle {
100.
anchors.fill: parent
101.
opacity: mouse.pressed ? 1 : 0
102.
Behavior on opacity { NumberAnimation{ duration: 100 }}
103.
gradient: Gradient {
104.
GradientStop { position: 0 ; color: "#22000000" }
105.
GradientStop { position: 0.2 ; color: "#11000000" }
106.
}
107.
border.color: "darkgray"
108.
antialiasing: true
109.
radius: 4
110.
}
111.
}
112.
}
113.
}
114.
}
1.
//SimpleLauncherDelegate.qml
01.
import QtQuick 2.0
02.
03.
Rectangle {
04.
id: container
05.
property Item listItem
06.
width: ListView.view.width
07.
height: button.implicitHeight + 22
08.
09.
gradient: Gradient {
10.
GradientStop {
11.
position: 0
12.
Behavior on color {ColorAnimation { duration: 100 }}
13.
color: button.pressed ? "#e0e0e0" : "#fff"
14.
}
15.
GradientStop {
16.
position: 1
17.
Behavior on color {ColorAnimation { duration: 100 }}
18.
color: button.pressed ? "#e0e0e0" : button.containsMouse ? "#f5f5f5" : "#eee"
19.
}
20.
}
21.
22.
Image {
23.
id: image
24.
opacity: 0.7
25.
Behavior on opacity {NumberAnimation {duration: 100}}
26.
source: "../images/navigation_next_item.png"
27.
anchors.verticalCenter: parent.verticalCenter
28.
anchors.right: parent.right
29.
anchors.rightMargin: 16
30.
}
31.
32.
Item {
33.
id: button
34.
anchors.top: parent.top
35.
anchors.left: parent.left
36.
anchors.bottom: parent.bottom
37.
anchors.right:image.left
38.
implicitHeight: col.height
39.
height: implicitHeight
40.
width: buttonLabel.width + 20
41.
42.
MouseArea {
43.
id: mouseArea
44.
anchors.fill: parent
45.
onClicked: listItem.listUrl = url
46.
hoverEnabled: true
47.
}
48.
49.
Column {
50.
spacing: 2
51.
id: col
52.
anchors.verticalCenter: parent.verticalCenter
53.
width: parent.width
54.
Text {
55.
id: buttonLabel
56.
anchors.left: parent.left
57.
anchors.leftMargin: 10
58.
anchors.right: parent.right
59.
anchors.rightMargin: 10
60.
text: name
61.
color: "black"
62.
font.pixelSize: 22
63.
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
64.
styleColor: "white"
65.
style: Text.Raised
66.
67.
}
68.
Text {
69.
id: buttonLabel2
70.
anchors.left: parent.left
71.
anchors.leftMargin: 10
72.
text: description
73.
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
74.
color: "#666"
75.
font.pixelSize: 12
76.
}
77.
}
78.
}
79.
80.
Rectangle {
81.
height: 1
82.
color: "#ccc"
83.
anchors.bottom: parent.bottom
84.
anchors.left: parent.left
85.
anchors.right: parent.right
86.
}
87.
}
后面的代码是我引用的，时间关系就没有写备注了，不过未来，如果时间允许的话我会写一些组件什么的，到时候代码应该会放到BitBucket或者github上去,有兴趣的盆友可以期待下，或者自己也去研究下，这个框架封装了openGL做游戏什么的也会是一个不错的选择。。。
转载：http://www.it165.net/pro/html/201403/10516.html
扫一扫
3270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
