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

 

相关文章
|
3月前
|
前端开发
Canvas绘画设计之网格线背景设置成网格源码
Canvas绘画设计之网格线背景设置成网格源码
|
11月前
《QT从基础到进阶·六》布局及布局中的小部件排列
《QT从基础到进阶·六》布局及布局中的小部件排列
139 0
|
11月前
《QT从基础到进阶·五》组件与组件或布局与布局的重叠问题
《QT从基础到进阶·五》组件与组件或布局与布局的重叠问题
373 0
|
程序员 Python
Python Qt GUI设计:QScrollBar类实现窗口水平或垂直滑动条效果(拓展篇—4)
使用QScrollBar可以在窗口控件提供了水平的或垂直的滚动条,这样可以扩大当前窗口的有效装载面积,从而装载更多的控件。
|
数据可视化 JavaScript 前端开发
【视觉高级篇】18 # 如何生成简单动画让图形动起来?
【视觉高级篇】18 # 如何生成简单动画让图形动起来?
90 0
【视觉高级篇】18 # 如何生成简单动画让图形动起来?
|
iOS开发
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)
134 0
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)
|
Windows
Qt+ECharts开发笔记(二):Qt窗口动态调整大小,使ECharts跟随Qt窗口大小变换而变换大小
上一篇将ECharts嵌入Qt中,在开始ECharts使用之前,还有一个很重要的功能,就是在窗口变换大小的时候,ECharts的图表尺寸也要跟随Qt窗口变换大小而变换大小。
Qt+ECharts开发笔记(二):Qt窗口动态调整大小,使ECharts跟随Qt窗口大小变换而变换大小
|
计算机视觉
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
关于 Qt图形视图框架自绘图元放到左边和上边之外,部分在内进行拉伸后,拉伸多余的区域无法碰撞 的解决方法
关于 Qt图形视图框架自绘图元放到左边和上边之外,部分在内进行拉伸后,拉伸多余的区域无法碰撞 的解决方法
关于 Qt图形视图框架自绘图元放到左边和上边之外,部分在内进行拉伸后,拉伸多余的区域无法碰撞 的解决方法
SwiftUI—创建一个水平方向上的滚动视图
SwiftUI—创建一个水平方向上的滚动视图
201 0
SwiftUI—创建一个水平方向上的滚动视图