QML学习笔记（四）-TabView-竖直方向

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

作者： 狐狸家的鱼

Github： 八至

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

想实现垂直竖直方向的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

                }

            }

        }