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月前
|
人工智能
用illustrator、AI将边框线转换为填充形状
用illustrator、AI将边框线转换为填充形状
|
4月前
|
前端开发
【零基础入门前端系列】—旋转、缩放、倾斜、过渡(二十三)
【零基础入门前端系列】—旋转、缩放、倾斜、过渡(二十三)
|
5月前
《QT从基础到进阶·六》布局及布局中的小部件排列
《QT从基础到进阶·六》布局及布局中的小部件排列
72 0
|
5月前
《QT从基础到进阶·五》组件与组件或布局与布局的重叠问题
《QT从基础到进阶·五》组件与组件或布局与布局的重叠问题
90 0
|
5月前
《QT从基础到进阶·十三》QPixmap、QImage的缩放——
《QT从基础到进阶·十三》QPixmap、QImage的缩放——
82 0
|
5月前
|
C++
《QT从基础到进阶·十五》用鼠标绘制矩形(QGraphicsView、QPainter、QGraphicsRectItem)
《QT从基础到进阶·十五》用鼠标绘制矩形(QGraphicsView、QPainter、QGraphicsRectItem)
149 0
|
10月前
|
程序员 Python
Python Qt GUI设计:QScrollBar类实现窗口水平或垂直滑动条效果(拓展篇—4)
使用QScrollBar可以在窗口控件提供了水平的或垂直的滚动条,这样可以扩大当前窗口的有效装载面积,从而装载更多的控件。
|
数据可视化 JavaScript 前端开发
【视觉高级篇】18 # 如何生成简单动画让图形动起来?
【视觉高级篇】18 # 如何生成简单动画让图形动起来?
67 0
【视觉高级篇】18 # 如何生成简单动画让图形动起来?
|
算法 前端开发 JavaScript
【视觉基础篇】10 # 图形系统如何表示颜色?
【视觉基础篇】10 # 图形系统如何表示颜色?
141 0
【视觉基础篇】10 # 图形系统如何表示颜色?
|
人工智能 机器人 图形学
Unity NavMesh & LineRenderer AI寻路及导航路径的绘制
Unity NavMesh & LineRenderer AI寻路及导航路径的绘制
380 1
Unity NavMesh & LineRenderer AI寻路及导航路径的绘制

热门文章

最新文章