//TabWidget.qml
import Qt 4.7
Item {
id: tabWidget
default property alias content: stack.children //将tab页集合设置一个默认属性
property int current: 0
onCurrentChanged: setOpacities()
Component.onCompleted: setOpacities()
function setOpacities() {
for(var i = 0; i < content.length; ++i) {
content[i].opacity = (i == current ? 1 : 0);//将当前的tab设置为非透明,其余透明
}
}
Row { //此组件为tab选项
id: header
Repeater {
model: content.length
delegate: Rectangle {
width: tabWidget.width / content.length
height: 36
color: "#e3e3e3"
Rectangle { //此组件为tab选项和tab页之间的一条线
width: tabWidget.width; height: 1
anchors { bottom: parent.bottom; bottomMargin: 1}
color: "#abc2c2"
}
BorderImage { //tab选项图片
anchors { fill: parent; leftMargin: 2; topMargin: 5; rightMargin: 1}
border { left: 7; right: 7}
source: tabWidget.current == index? "tab.png" : "unselect.png"
}
Text { //tab选项的文本
horizontalAlignment: "AlignHCenter"; verticalAlignment: "AlignVCenter"
anchors.fill: parent
text: content[index].title
elide: Text.ElideRight
font.bold: tabWidget.current == index
}
MouseArea {
anchors.fill: parent
onClicked: tabWidget.current = index //存储当前选中tab页
}
}
}
}
Item { //此组件为tab页
id: stack
width: tabWidget.width
anchors.top: header.bottom
anchors.bottom: tabWidget.bottom
}
}
//main.qml
import Qt 4.7
TabWidget {
id: tabs
width: 640; height: 480
Rectangle { //第一个tab页
property string title: "Red"
anchors.fill: parent
color: "#e3e3e3"
Rectangle {
anchors.fill: parent; anchors.margins: 20 //tab边框与父容器的距离
color: "#7fff7f"
Text {
width: parent.width - 20
anchors.centerIn: parent; horizontalAlignment: "AlignHCenter"
text: "Roses are red"
font.pixelSize: 20
wrapMode: Text.WordWrap
}
}
}
Rectangle { //第二个tab页
property string title: "Green"
anchors.fill: parent
color: "#e3e3e3"
Rectangle {
anchors.fill: parent; anchors.margins: 20
color: "#7fff7f"
Text {
width: parent.width - 20
anchors.centerIn: parent; horizontalAlignment: "AlignHCenter"
text: "Flower stems are green"
font.pixelSize: 20
wrapMode: Text.WordWrap
}
}
}
Rectangle { //第三个tab页
property string title: "Blue"
anchors.fill: parent
color: "#e3e3e3"
Rectangle {
anchors.fill: parent; anchors.margins: 20
color: "#7fff7f"
Text {
width: parent.width - 20
anchors.centerIn: parent; horizontalAlignment: "AlignHCenter"
text: "Violets are blue"
font.pixelSize: 20
wrapMode: Text.WordWrap
}
}
}
}