Qml-TabBar类使用

Qml-TabBar类使用

TabBar的概述

1. TabBar继承于Container 由TabButton进行填充，可以与提供currentIndex属性的任何容器或布局控件一起使用，如StackLayout 或 SwipeView；
2. contentHeight : real:TabBar的内容高度，用于计算标签栏的隐式高度
3. contentWidth : real：TabBar的内容宽度，用于计算标签栏的隐式宽度
4. position : enumeration：如果TabBar用于Application或Page 组件，TabBar的位置

SplitView的实例代码

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts//TabBar继承于Container, 由TabButton填充，可于提供currentIndex属性的容器或者布局器使用，如StackLayout 或 SwipeViewItem {id: idTabBarRootRectangle{anchors.fill: parentTabBar{id:idTabBar//指明TabBar的高度和宽度contentHeight: 40contentWidth: parent.width//如果没有明确宽度，TabButton会均分或者由TabButton的隐式宽度的和来推导TabBar的宽度TabButton{text: ("Tab1")//width: 100implicitWidth: 100onClicked: {console.log("tabButton index = ",TabBar.index);}}TabButton{//width: 100implicitWidth: 100text: ("Tab2")}TabButton{//width: 100implicitWidth: 100text: ("Tab3")}onCurrentIndexChanged: {console.log("cur index = ",idTabBar.currentIndex,"contentWidth = ",idTabBar.contentWidth);console.log("conttentHeight = ",idTabBar.contentHeight)var child = idTabBar.contentChildren;               //返回一个list 数据console.log("child size = ",child.length);          //可以使用list 的length属性获取 list的长度}background:Rectangle{anchors.fill: parent;color:"yellow"border.width:1border.color: "red";}}//栈布局，只显示currentIndex对应的ItemStackLayout{//需要在StackLayout中做布局，控制StackLayout的区域anchors.top: idTabBar.bottomanchors.bottom: parent.bottomwidth: parent.widthcurrentIndex: idTabBar.currentIndex//插入于TabBar 中TabButton 对应的内容区域Text{text: "I am Tab1 "verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCenter;}Text{text: "I am Tab2 "verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCenter;}Text{text: "I am Tab3 "verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCenter;}}}
}

TabBar实例代码运行结果如下：