QML tabview使用

最新推荐文章于 2024-01-05 11:29:22 发布

aderwa

最新推荐文章于 2024-01-05 11:29:22 发布

阅读量9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： QT笔记文章标签： qml qt5 ui tabview

本文链接：https://blog.youkuaiyun.com/aderwa/article/details/46917247

3 篇文章

订阅专栏

本文介绍了QML中TabView的使用，包括基本功能和如何定制标签标题，帮助开发者理解如何根据用户点击的标签切换显示内容。

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

tabview为标签选项卡，可根据点中的标签切换显示的内容。简单用法如下：

TabView {

            id: tabView;

            anchors.fill: parent;

            Tab {

               id:atab

               title: "当前警报"

               source: "a.qml"

            Tab {

               id:btab

               title: "当前警报"

              source: "b.qml"

外部可通过Tab的item属性访问到source对应文件最顶层元件的属性，这点是继承于Loader类。

复杂一点的话可以对标签Title进行定制：如下

style: TabViewStyle {

                tab: Item{

                    implicitWidth: Math.max(text.width + 8, 80);

                    implicitHeight: 48;

                    Rectangle {

                        width: (styleData.index < control.count - 1) ? (parent.width - 2) : parent.width;

                        height: parent.height - 4;

                        anchors.top: parent.top;

                        anchors.left: parent.left;

                        anchors.leftMargin: 1;

                        visible: styleData.selected;

                        gradient: Gradient {

                            GradientStop{position: 0.0; color: "#606060";}

                            GradientStop{position: 0.5; color: "#c0c0c0";}

                            GradientStop{position: 1.0; color: "#a0a0a0";}

                    Rectangle {

                        width: 2;

                        height: parent.height - 4;

                        anchors.top: parent.top;

                        anchors.right: parent.right;

                        visible: styleData.index < control.count - 1;

                        gradient: Gradient {

                            GradientStop{position: 0.0; color: "#404040";}

                            GradientStop{position: 0.5; color: "#707070";}

                            GradientStop{position: 1.0; color: "#404040";}

                    RowLayout {

                        implicitWidth: Math.max(text.width, 72);

                        height: 48;

                        anchors.centerIn: parent;

                        z: 1;

//                        Image{

//                            width: 48;

//                            height: 48;

//                            source: warnrect.icons[styleData.index%3];

//                        }

                        Text {

                            id: text;

                            text: styleData.title;

                            font.pointSize: 20;

                            color: styleData.selected ? "blue" : (styleData.hovered ? "green" : "white");

                tabBar: Rectangle {

                    height: 56;

                    gradient: Gradient {

                        GradientStop{position: 0.0; color: "#484848";}

                        GradientStop{position: 0.3; color: "#787878";}

                        GradientStop{position: 1.0; color: "#a0a0a0";}

                    Rectangle {

                        width: parent.width;

                        height: 4;

                        anchors.bottom: parent.bottom;

                        border.width: 2;

                        border.color: "#c7c7c7";

如果需要动态添加Tab,可以使用tabview的AddTab或InsertTab,简单实例如下：

tabView.addTab("title",compent);compent为自己定义的Component,从标签列表末尾开始添加
tabView.insertTab(index,"title",compent) 指定添加的位置index
其他方法可以参考QT帮助文档。