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

 

相关文章
|
存储 JavaScript 前端开发
qml var类型详解
qml var类型详解
260 1
|
前端开发 jenkins 应用服务中间件
使用verdaccio打造自己的npm私有化仓库
使用verdaccio打造自己的npm私有化仓库
876 0
使用verdaccio打造自己的npm私有化仓库
|
Java Spring
SpringBoot不扫描某个包
因为项目中写了很多个CommandLineRunner,导致在本地启动项目的时候就会很慢,注释掉的话,又会很麻烦~~~
899 0
|
Linux Shell 开发者
深入了解 Linux 命令 `autoscan`:为自动配置脚本做准备
`autoscan` 是 Linux 和 Unix-like 系统中用于软件配置的工具,它扫描源代码并生成 `configure.scan` 文件,为 `autoconf` 创建初始模板。开发者通常将 `configure.scan` 重命名为 `configure.ac` 并进行编辑,然后用 `autoconf` 转换为可执行的 `configure` 脚本。在使用前,记得备份项目,确保权限,并安装 `autoconf`。`configure` 脚本能适应多种系统,检查环境并生成 `Makefile`。
|
容器
QML之定位器(Column,Row,Flow,Grid)
QML之定位器(Column,Row,Flow,Grid)
919 2
|
传感器 设计模式 测试技术
【软件设计师备考 专题 】程序设计的基础:模块划分的原则、方法和标准
【软件设计师备考 专题 】程序设计的基础:模块划分的原则、方法和标准
716 0
|
C++ 计算机视觉
Opencv(C++)系列学习---读取视频文件和打开摄像头
Opencv(C++)系列学习---读取视频文件和打开摄像头
560 0
|
存储 编解码 自然语言处理
ELK技术栈 - logstash学习笔记(七)
ELK技术栈 - logstash学习笔记(七)
182 0
|
架构师 Java 编译器
Java 8升级Java 11,升级必知要点!竟然有这些坑…
随着技术的不断进步,Java作为一种广泛使用的编程语言,其版本更新带来了许多新特性和性能提升。从Java 8升级到Java 11,是一个重要的转变,它不仅带来了新的编程范式,还引入了对现代软件开发的多项优化。然而,在享受这些新特性的同时,开发者也可能遇到一些升级过程中的“坑”。
221 1
|
编解码
vlc可以播放这个m3u8但是LivePlayer只有声音没画面
vlc可以播放这个m3u8但是LivePlayer只有声音没画面
2100 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问