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&¤tIndex<=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&¤tIndex>=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
}
希望对大家有所帮助