QML之TabWidget

2019独角兽企业重金招聘Python工程师标准>>>

转自：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.     }  
47.     Item {  //此组件为tab页  
48.         id: stack  
49.         width: tabWidget.width  
50.         anchors.top: header.bottom  
51.         anchors.bottom: tabWidget.bottom  
52.     }  
53.   
54. }  

 

[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. }  

 

 

转载于:https://my.oschina.net/birdlovecloud/blog/339325