QML之TabWidget

转自：http://blog.csdn.net/liuhongwei123888/article/details/6174839

**
[javascript]**  view plain copy

1. //TabWidget.qml

2. import Qt 4.7

3. Item {

4. id: tabWidget

5. default property alias content: stack.children //将tab页集合设置一个默认属性

6. property int current: 0

7. onCurrentChanged: setOpacities()

8. Component.onCompleted: setOpacities()

9. function setOpacities() {

10. for(var i = 0; i < content.length; ++i) {

11. content[i].opacity = (i == current ? 1 : 0);//将当前的tab设置为非透明,其余透明

12. }

13. }

14. Row {  //此组件为tab选项

15. id: header

16. Repeater {

17. model: content.length

18. delegate: Rectangle {

19. width: tabWidget.width / content.length

20. height: 36

21. color: "#e3e3e3"

22. Rectangle {  //此组件为tab选项和tab页之间的一条线

23. width: tabWidget.width; height: 1

24. anchors { bottom: parent.bottom; bottomMargin: 1}

25. color: "#abc2c2"

26. }

27. BorderImage {  //tab选项图片

28. anchors { fill: parent; leftMargin: 2; topMargin: 5; rightMargin: 1}

29. border { left: 7; right: 7}

30. source: tabWidget.current == index? "tab.png" : "unselect.png"

31. }

32. Text {  //tab选项的文本

33. horizontalAlignment: "AlignHCenter"; verticalAlignment: "AlignVCenter"

34. anchors.fill: parent

35. text: content[index].title

36. elide: Text.ElideRight

37. font.bold: tabWidget.current == index

38. }

39. MouseArea {

40. anchors.fill: parent

41. onClicked: tabWidget.current = index  //存储当前选中tab页

42. }

43. }

44. }

45. }

46. Item {  //此组件为tab页

47. id: stack

48. width: tabWidget.width

49. anchors.top: header.bottom

50. anchors.bottom: tabWidget.bottom

51. }

52. }

[javascript]  view plain copy

1. //main.qml
2. import Qt 4.7
3. TabWidget {
4. id: tabs
5. width: 640; height: 480
6. Rectangle {  //第一个tab页
7. property  string title: "Red"
8. anchors.fill: parent
9. color: "#e3e3e3"
10. Rectangle {
11. anchors.fill: parent; anchors.margins: 20 //tab边框与父容器的距离
12. color: "#7fff7f"
13. Text {
14. width: parent.width - 20
15. anchors.centerIn: parent; horizontalAlignment: "AlignHCenter"
16. text: "Roses are red"
17. font.pixelSize: 20
18. wrapMode: Text.WordWrap
19. }
20. }
21. }
22. Rectangle { //第二个tab页
23. property  string title: "Green"
24. anchors.fill: parent
25. color: "#e3e3e3"
26. Rectangle {
27. anchors.fill: parent; anchors.margins: 20
28. color: "#7fff7f"
29. Text {
30. width: parent.width - 20
31. anchors.centerIn: parent; horizontalAlignment: "AlignHCenter"
32. text: "Flower stems are green"
33. font.pixelSize: 20
34. wrapMode: Text.WordWrap
35. }
36. }
37. }
38. Rectangle { //第三个tab页
39. property  string title: "Blue"
40. anchors.fill: parent
41. color: "#e3e3e3"
42. Rectangle {
43. anchors.fill: parent; anchors.margins: 20
44. color: "#7fff7f"
45. Text {
46. width: parent.width - 20
47. anchors.centerIn: parent; horizontalAlignment: "AlignHCenter"
48. text: "Violets are blue"
49. font.pixelSize: 20
50. wrapMode: Text.WordWrap
51. }
52. }
53. }
54. }