qml学习------------------TabView

来源：互联网发布：大数据和云存储区别编辑：程序博客网时间：2024/04/29 06:01
本次学习了tabview的使用，tabview的使用非常简单的，但是要做出非常漂亮的TabView就很难了，就需要依靠他的TabViewStyle来自定义属性了。
import QtQuick 2.2import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.2import QtQuick.Layouts 1.1Rectangle{    width:360;    height: 240;    color: "lightgray";    id:root;    property var icons: ["call1.png" ,"call2.png" ,"call3.png" ];    Component.onCompleted: {        tabView.addTab("ABC" , tabContent);        tabView.addTab("BCD" , tabContent);        tabView.addTab("CDE" , tabContent);        tabView.addTab("DEF" , tabContent);    }    Component{        id: tabContent;        Rectangle{            implicitWidth: 100;            implicitHeight: 100;            anchors.fill: parent;            color: Qt.rgba(Math.random() , Math.random() , Math.random() );        }    }    TabView{        id: tabView;        anchors.fill:  parent;        style: TabViewStyle{            tab: Item{                implicitWidth:  Math.max(text.width + 8 , 80 );                implicitHeight: 48;                //被选中状态下的item                Rectangle{                    width: (styleData.index < control.count - 1 ) ? (parent.width - 2 ):parent.width;                    height: parent.height - 4;                    anchors.top: parent.top;                    anchors.left: parent.left;                    anchors.leftMargin: 1;                    visible: styleData.selected;                    gradient: Gradient{                        GradientStop{position: 0.0 ; color:"#606060";}                        GradientStop{position: 0.5 ; color:"#c0c0c0";}                        GradientStop{position: 1.0 ; color:"#a0a0a0";}                    }                }                //未选中的状态                Rectangle{                    width: 2;                    height: parent.height - 4;                    anchors.top:  parent.top;                    anchors.right: parent.right;                    visible:  styleData.index < control.count - 1;                    gradient: Gradient{                        GradientStop{position: 0.0 ; color:"#404040";}                        GradientStop{position: 0.5 ; color:"#707070";}                        GradientStop{position: 1.0 ; color:"#404040";}                    }                }                //item的水平布局                RowLayout{                    implicitWidth:  Math.max( text.width , 71);                    height: 48;                    anchors.centerIn:  parent;                    z : 1;                    Image{                        width: 48;                        height: 48;                        source: root.icons(styleData.index%3);                    }                    Text{                        id: text;                        text:styleData.title;                        color:styleData.selected ?"blue" : (styleData.hovered ? "green":"white");                    }                }            }            tabBar :Rectangle{                height: 56;                gradient: Gradient{                    GradientStop{position: 0.0 ; color:"#484848";}                    GradientStop{position: 0.3 ; color:"#787878";}                    GradientStop{position: 1.0 ; color:"#a0a0a0";}                }                Rectangle{                    width: parent.width;                    height: 4;                    anchors.bottom: parent.bottom;                    border.width: 2;                    border.color: "#c7c7c7";                }            }        }    }}
0 0