QML学习笔记(十)-TabView-竖直方向

简介: 源码:https://github.com/sueRimn/QML-ExampleDemos想实现垂直竖直方向的TabView,查看文档,并没有对此的属性说明,所以跳出局限,自己做一个实例,录制软件没有录入鼠标效果如下: 核心代码如下: Column{ id...

源码:https://github.com/sueRimn/QML-ExampleDemos

想实现垂直竖直方向的TabView,查看文档,并没有对此的属性说明,所以跳出局限,自己做一个实例,录制软件没有录入鼠标

效果如下:

 

核心代码如下:

 
 
    Column{
        id:coloumn;
        spacing: 0;
        width: 100;
        height: 500;
        Rectangle{
            width: 100;
            height: 20;
            color: "#ffc2fc"
            Text{
                id:cake
                text: "蛋糕"
                font.pointSize: 12;
                anchors.centerIn: parent
            }
            MouseArea{
                anchors.fill: parent;
                onClicked: {
                    tabView.currentIndex = 0
                }
            }
        }
        Rectangle{
            width: 100;
            height: 20;
            color: "#ff557f"
            Text{
                id:hotPot
                text: "火锅"
                font.pointSize: 12;
                anchors.centerIn: parent
            }
            MouseArea{
                anchors.fill: parent;
                onClicked: {
                    tabView.currentIndex = 1
                }
            }
        }
        Rectangle{
            width: 100;
            height: 20;
            color: "#fff66f"
            Text{
                id:puff
                text: "泡芙"
                font.pointSize: 12;
                anchors.centerIn: parent
            }
            MouseArea{
                anchors.fill: parent;
                onClicked: {
                    tabView.currentIndex = 2;
                }
            }
        }
    }
    TabView{
        id:tabView;
        anchors.left: coloumn.right;
        anchors.top:coloumn.top
        height: coloumn.height
        tabsVisible: false
        tabPosition: Qt.leftEdge
        Tab{
            Rectangle{
                anchors.fill: parent;
                color: "#ffc2fc"
                Text{
                    text: "今天吃蛋糕"
                    color:"#333"
                    font.pointSize: 14
                    anchors.centerIn: parent
                }
            }
        }
        Tab{
            Rectangle{
                anchors.fill: parent;
                color: "#ff557f"
                Text{
                    text: "今天吃火锅"
                    color:"#333"
                    font.pointSize: 14
                    anchors.centerIn: parent
                }
            }
 
 
        }
        Tab{
            Rectangle{
                anchors.fill: parent;
                color: "#fff66f"
                Text{
                    text: "今天吃泡芙"
                    color:"#333"
                    font.pointSize: 14
                    anchors.centerIn: parent
                }
            }
        }
 
 
 

 

相关文章
|
4月前
|
前端开发
【零基础入门前端系列】—旋转、缩放、倾斜、过渡(二十三)
【零基础入门前端系列】—旋转、缩放、倾斜、过渡(二十三)
|
5月前
|
C++
《QT从基础到进阶·十五》用鼠标绘制矩形(QGraphicsView、QPainter、QGraphicsRectItem)
《QT从基础到进阶·十五》用鼠标绘制矩形(QGraphicsView、QPainter、QGraphicsRectItem)
141 0
|
5月前
《QT从基础到进阶·十七》QCursor鼠标的不同位置坐标获取
《QT从基础到进阶·十七》QCursor鼠标的不同位置坐标获取
56 0
|
5月前
《QT从基础到进阶·二十一》QGraphicsView、QGraphicsScene和QGraphicsItem坐标关系和应用
《QT从基础到进阶·二十一》QGraphicsView、QGraphicsScene和QGraphicsItem坐标关系和应用
124 0
《QT从基础到进阶·二十一》QGraphicsView、QGraphicsScene和QGraphicsItem坐标关系和应用
|
10月前
|
程序员 Python
Python Qt GUI设计:QScrollBar类实现窗口水平或垂直滑动条效果(拓展篇—4)
使用QScrollBar可以在窗口控件提供了水平的或垂直的滚动条,这样可以扩大当前窗口的有效装载面积,从而装载更多的控件。
|
计算机视觉 Python
openCV实践项目:拖拽虚拟方块
openCV实践项目:拖拽虚拟方块
openCV实践项目:拖拽虚拟方块
iOS-横竖屏管理,支持所有方向旋转时用代码控制允许旋转&不允许旋转
iOS-横竖屏管理,支持所有方向旋转时用代码控制允许旋转&不允许旋转
189 0
|
Windows
Qt+ECharts开发笔记(二):Qt窗口动态调整大小,使ECharts跟随Qt窗口大小变换而变换大小
上一篇将ECharts嵌入Qt中,在开始ECharts使用之前,还有一个很重要的功能,就是在窗口变换大小的时候,ECharts的图表尺寸也要跟随Qt窗口变换大小而变换大小。
Qt+ECharts开发笔记(二):Qt窗口动态调整大小,使ECharts跟随Qt窗口大小变换而变换大小
案例分享:Qt+OSG三维点云引擎(支持原点,缩放,单独轴或者组合多轴拽拖旋转,支持导入点云文件)
案例分享:Qt+OSG三维点云引擎(支持原点,缩放,单独轴或者组合多轴拽拖旋转,支持导入点云文件)
案例分享:Qt+OSG三维点云引擎(支持原点,缩放,单独轴或者组合多轴拽拖旋转,支持导入点云文件)
|
计算机视觉
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)