Qt-QMl-自定义自己想要的TabView

上效果图

上实现源码，这里的代码都是来自Qt官方源码修改其中某一行内容

/*

作者：张建伟

时间：2018年4月8日

简述：自定义TabView，主要实现Tab和实现内容重叠，不在占用独立空间

该文件内容仅适用于某平台显示器使用

*/

importQtQuick2.2

importQtQuick.Controls1.4

importQtQuick.Controls.Styles1.4

importQtQuick.Controls.Private1.0

FocusScope

{

id:root

implicitWidth:240

implicitHeight:150

propertyintcurrentIndex:0//当前标签索引

readonlypropertyintcount:__tabs.count//当前标签数量

propertyboolframeVisible:true//标签边框可见

propertybooltabsVisible:true//标签是否可见

propertyinttabPosition:Qt.TopEdge//标签位置

readonlypropertyaliascontentItem:stack//标签内容视图属性//这里翻译有问题

defaultpropertyaliasdata:stack.data//内容

propertyListModel__tabs:ListModel{}

propertyComponentstyle:Settings.styleComponent(Settings.style,"DTabViewStyle.qml",root)

propertyvar__styleItem:loader.item

onCurrentIndexChanged:__setOpacities()

//添加标签

functionaddTab(title,component)

{

returninsertTab(__tabs.count,title,component)

}

//插入标签

functioninsertTab(index,title,component)

{

vartab=tabcomp.createObject()

tab.sourceComponent=component

tab.title=title

__tabs.insert(index,{tab:tab})

tab.__inserted=true

tab.parent=stack

__didInsertIndex(index)

__setOpacities()

returntab

}

//移除标签

functionremoveTab(index)

{

vartab=__tabs.get(index).tab

__willRemoveIndex(index)

__tabs.remove(index,1)

tab.destroy()

__setOpacities()

}

//移动标签

functionmoveTab(from,to)

{

__tabs.move(from,to,1)

if(currentIndex==from)

{

currentIndex=to

}

else

{

varstart=Math.min(from,to)

varend=Math.max(from,to)

if(currentIndex>=start&&currentIndex<=end)

{

if(from<to)

--currentIndex

else

++currentIndex

}

}

}

//获取标签

functiongetTab(index)

{

vardata=__tabs.get(index)

returndata&&data.tab

}

function__willRemoveIndex(index)

{

if(count>1&&(currentIndex>index||currentIndex==count-1))

--currentIndex

}

function__didInsertIndex(index)

{

if(count>1&&currentIndex>=index)

currentIndex++

}

function__setOpacities(){

for(vari=0;i<__tabs.count;++i)

{

varchild=__tabs.get(i).tab

child.visible=(i==currentIndex?true:false)

}

}

activeFocusOnTab:false

Component

{

id:tabcomp

Tab{}

}

TabBar

{

id:tabbarItem

objectName:"tabbar"

tabView:root

style:loader.item

anchors.top:parent.top

anchors.left:root.left

anchors.right:root.right

}

Loader

{

id:loader

z:tabbarItem.z-1

sourceComponent:style

propertyvar__control:root

}

Loader

{

id:frameLoader

z:tabbarItem.z-1

anchors.fill:parent

//anchors.topMargin:tabPosition===Qt.TopEdge&&tabbarItem&&tabsVisible?Math.max(0,tabbarItem.height-baseOverlap):0

anchors.bottomMargin:tabPosition===Qt.BottomEdge&&tabbarItem&&tabsVisible?Math.max(0,tabbarItem.height-baseOverlap):0

sourceComponent:frameVisible&&loader.item?loader.item.frame:null

propertyintbaseOverlap:__styleItem?__styleItem.frameOverlap:0

Item{

id:stack

anchors.fill:parent

anchors.margins:(frameVisible?frameWidth:0)

anchors.topMargin:anchors.margins+(style=="mac"?6:0)

anchors.bottomMargin:anchors.margins

propertyintframeWidth

propertystringstyle

propertyboolcompleted:false

Component.onCompleted:{

addTabs(stack.children)

completed=true

}

onChildrenChanged:{

if(completed)

stack.addTabs(stack.children)

}

functionaddTabs(tabs){

vartabAdded=false

for(vari=0;i<tabs.length;++i){

vartab=tabs[i]

if(!tab.__inserted&&tab.Accessible.role===Accessible.LayeredPane){

tab.__inserted=true

//reparenttabscreateddynamicallybycreateObject(tabView)

tab.parent=stack

//adynamicallyaddedtabshouldalsogetautomaticallyremovedwhendestructed

if(completed)

tab.Component.onDestruction.connect(stack.onDynamicTabDestroyed.bind(tab))

__tabs.append({tab:tab})

tabAdded=true

}

}

if(tabAdded)

__setOpacities()

}

functiononDynamicTabDestroyed(){

for(vari=0;i<__tabs.count;++i){

if(__tabs.get(i).tab===this){

__willRemoveIndex(i)

__tabs.remove(i,1)

__setOpacities()

break

}

}

}

}

onLoaded:{item.z=-1}

}

onChildrenChanged:stack.addTabs(root.children)

states:[

State{

name:"Bottom"

when:tabPosition===Qt.BottomEdge&&tabbarItem!=undefined

PropertyChanges{

target:tabbarItem

anchors.topMargin:-frameLoader.baseOverlap

}

AnchorChanges{

target:tabbarItem

anchors.top:frameLoader.bottom

}

}

]

//style:TabViewStyle

//{

//tab:Rectangle

//{

//id:t_root

////implicitWidth:Math.max(text.width+4,80)

//implicitWidth:80

//implicitHeight:30

////color:styleData.selected?"steelblue":"lightsteelblue"

//propertyboolselectd:styleData.selected

//Canvas

//{

//id:m_canvas

//anchors.fill:parent

//onPaint:

//{

//}

//}

//}

//}

}

//BaseTabView

//{

//style:TabViewStyle

//{

//}

//Text{

//id:text

//anchors.centerIn:parent

//text:styleData.title

//font.family:"微软雅黑"

//font.pixelSize:18

//color:styleData.selected?"black":"green"

//}

//}

//}

//}

这里还有一个是美化的样式表，还是现在还有个问题，这个样式文件无法拷出来，必须还放到Qt的程序目录才可以

/*

作者：张建伟

时间：2018年4月8日

简述：自定义TabViewStyle文件

*/

importQtQuick2.2

importQtQuick.Controls1.2

importQtQuick.Controls.Private1.0

Style{

readonlypropertyTabViewcontrol:__control

propertybooltabsMovable:false

propertyinttabsAlignment:Qt.AlignLeft

propertyinttabOverlap:1

propertyintframeOverlap:2

propertyComponentframe:Rectangle{

color:"#dcdcdc"

border.color:"#aaa"

Rectangle{

anchors.fill:parent

color:"transparent"

border.color:"#66ffffff"

anchors.margins:1

}

}

propertyComponenttab:Item{

scale:control.tabPosition===Qt.TopEdge?1:-1

propertyinttotalOverlap:tabOverlap*(control.count-1)

propertyrealmaxTabWidth:control.count>0?(styleData.availableWidth+totalOverlap)/control.count:0

//implicitWidth:Math.round(Math.min(maxTabWidth,textitem.implicitWidth+20))

implicitWidth:80

implicitHeight:Math.round(textitem.implicitHeight+10)

Item{

id:m_Item

anchors.fill:parent

anchors.bottomMargin:styleData.selected?0:1

Canvas

{

id:m_Canvas

anchors.fill:parent

propertyboolisSelectd:styleData.selected

propertyintm_width:m_Item.width

propertyintm_height:m_Item.height

onPaint:

{

varctx=getContext("2d");

ctx.width=m_width

ctx.clearRect(0,0,2000,2000);

ctx.height=m_height

ctx.lineWidth=2.0;

ctx.lineJoin='miter';

ctx.strokeStyle="#00FF00";

ctx.fillStyle="#00FF00";

ctx.moveTo(1,0);

ctx.lineTo(m_Item.width-1,0);

ctx.lineTo(70,m_Item.height-1);

ctx.lineTo(10,m_Item.height-1);

ctx.lineTo(1,0);

if(isSelectd)

{

ctx.fill();

}

else

{

ctx.stroke();

}

}

}

}

Text{

id:textitem

anchors.fill:parent

anchors.leftMargin:4

anchors.rightMargin:4

verticalAlignment:Text.AlignVCenter

horizontalAlignment:Text.AlignHCenter

text:styleData.title

elide:Text.ElideMiddle

renderType:Settings.isMobile?Text.QtRendering:Text.NativeRendering

scale:control.tabPosition===Qt.TopEdge?1:-1

font.bold:true

font.family:"微软雅黑"

font.pixelSize:16

color:styleData.selected?"black":"#00FF00"

Rectangle{

anchors.centerIn:parent

width:textitem.paintedWidth+6

height:textitem.paintedHeight+4

visible:(styleData.activeFocus&&styleData.selected)

radius:3

color:"#224f9fef"

border.color:"#47b"

}

}

}

propertyComponentleftCorner:null

propertyComponentrightCorner:null

propertyComponenttabBar:null

}

希望对大家有所帮助