Qml-TabBar类使用
Qml-TabBar类使用TabBar的概述
[*]TabBar继承于Container 由TabButton举行添补，可以与提供currentIndex属性的任何容器或布局控件一起使用，如StackLayout 或 SwipeView；
[*]contentHeight : real:TabBar的内容高度，用于计算标签栏的隐式高度
[*]contentWidth : real：TabBar的内容宽度，用于计算标签栏的隐式宽度
[*]position : enumeration：假如TabBar用于Application或Page 组件，TabBar的位置
SplitView的实例代码
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
//TabBar继承于Container, 由TabButton填充，可于提供currentIndex属性的容器或者布局器使用，如StackLayout 或 SwipeView
Item {
id: idTabBarRoot
Rectangle{
anchors.fill: parent
TabBar{
id:idTabBar
//指明TabBar的高度和宽度
contentHeight: 40
contentWidth: parent.width
//如果没有明确宽度，TabButton会均分或者由TabButton的隐式宽度的和来推导TabBar的宽度
TabButton{
text: ("Tab1")
//width: 100
implicitWidth: 100
onClicked: {
console.log("tabButton index = ",TabBar.index);
}
}
TabButton{
//width: 100
implicitWidth: 100
text: ("Tab2")
}
TabButton{
//width: 100
implicitWidth: 100
text: ("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:1
border.color: "red";
}
}
//栈布局，只显示currentIndex对应的Item
StackLayout{
//需要在StackLayout中做布局，控制StackLayout的区域
anchors.top: idTabBar.bottom
anchors.bottom: parent.bottom
width: parent.width
currentIndex: idTabBar.currentIndex
//插入于TabBar 中TabButton 对应的内容区域
Text{
text: "I am Tab1 "
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter;
}
Text{
text: "I am Tab2 "
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter;
}
Text{
text: "I am Tab3 "
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter;
}
}
}
}
TabBar实例代码运行结果如下：
https://i-blog.csdnimg.cn/direct/2ff1fe282f1e488c82b81a5f8bdabb0e.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]