QML之TabWidget

最新推荐文章于 2025-04-20 00:55:32 发布

喝醉的毛毛虫

最新推荐文章于 2025-04-20 00:55:32 发布

阅读量9.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Meego 文章标签： string qt meego tabs border header

本文链接：https://blog.youkuaiyun.com/liuhongwei123888/article/details/6174839

Meego 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个使用Qt 4.7版本的QML实现TabWidget的示例代码。该示例展示了如何通过QML创建一个具有多个标签页的界面，并通过简单的交互实现标签页之间的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新年快乐。

明天就上班啦。也该继续学习了。同时期待13日的到来，看看传说的Meego设备是不是浮云。网上都传"那货不是手机了"

今天又发现一个有用的example呵呵.其实就是一个Tab控件.

//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 } } } }