zoukankan      html  css  js  c++  java
  • QML学习笔记(四)-TabView-竖直方向

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

    作者: 狐狸家的鱼

    Github: 八至

    版权声明:如需转载请获取授权和联系作者

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

    效果如下:

    核心代码如下:

    
    
        Column{
            id:coloumn;
            spacing: 0;
             100;
            height: 500;
            Rectangle{
                 100;
                height: 20;
                color: "#ffc2fc"
                Text{
                    id:cake
                    text: "蛋糕"
                    font.pointSize: 12;
                    anchors.centerIn: parent
                }
                MouseArea{
                    anchors.fill: parent;
                    onClicked: {
                        tabView.currentIndex = 0
                    }
                }
            }
            Rectangle{
                 100;
                height: 20;
                color: "#ff557f"
                Text{
                    id:hotPot
                    text: "火锅"
                    font.pointSize: 12;
                    anchors.centerIn: parent
                }
                MouseArea{
                    anchors.fill: parent;
                    onClicked: {
                        tabView.currentIndex = 1
                    }
                }
            }
            Rectangle{
                 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
                    }
                }
            }
    
    
    
    
  • 相关阅读:
    弹跳加载中自定义简单控件实现
    属性动画的监听
    属性动画入门学习
    动画示例
    帧动画代码实现示例
    利用代码定义动画
    利用XMl标签定义动画
    自定义控件的使用方法
    自定义控件之canvas变换和裁剪
    自定义控件之Region区域
  • 原文地址:https://www.cnblogs.com/suRimn/p/9831269.html
Copyright © 2011-2022 走看看