一步一步学Qt（QtQuick)/qml开发第六篇

这篇我们来挖一个坑，做一些没用的东西，一切之前，本篇只为只为演示和介绍Qt quick的效果和QML如何使用，不考虑代码质量，其实中间的大部分代码是可以复用的，不过对于初学的我们，还需要多多研究，OK废话不多说，先看效果：

桌面效果：



android效果：



换页：（第二页比较坑，不过都说了，这是没用的东西，只为看效果。就这么简单，呵呵）



什么都不说了，直接上代码：

 

view sourceprint?

1.

//main.qml

view sourceprint?

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.

}

在和main.qml文件并列的文件夹内创建一个main文件夹里面再创建Main.qml和SimpleLauncherDelegate.qml
 

代码如下

 

view sourceprint?

1.

//Main.qml

view sourceprint?

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.

}

view sourceprint?

1.

//SimpleLauncherDelegate.qml

view sourceprint?

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