Qml-TabBar类使用

Qml-TabBar类使用

TabBar的概述

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

SplitView的实例代码

1. import QtQuick
2. import QtQuick.Controls
3. import QtQuick.Layouts
5. //TabBar继承于Container, 由TabButton填充，可于提供currentIndex属性的容器或者布局器使用，如StackLayout 或 SwipeView
7. Item {
8.     id: idTabBarRoot
10.     Rectangle{
11.         anchors.fill: parent
13.         TabBar{
14.             id:idTabBar
15.             //指明TabBar的高度和宽度
16.             contentHeight: 40
17.             contentWidth: parent.width
19.             //如果没有明确宽度，TabButton会均分或者由TabButton的隐式宽度的和来推导TabBar的宽度
20.             TabButton{
21.                 text: ("Tab1")
22.                 //width: 100
23.                 implicitWidth: 100
24.                 onClicked: {
25.                     console.log("tabButton index = ",TabBar.index);
26.                 }
27.             }
29.             TabButton{
30.                 //width: 100
31.                 implicitWidth: 100
32.                 text: ("Tab2")
33.             }
35.             TabButton{
36.                 //width: 100
37.                 implicitWidth: 100
38.                 text: ("Tab3")
39.             }
41.             onCurrentIndexChanged: {
42.                 console.log("cur index = ",idTabBar.currentIndex,"contentWidth = ",idTabBar.contentWidth);
43.                 console.log("conttentHeight = ",idTabBar.contentHeight)
44.                 var child = idTabBar.contentChildren;               //返回一个list 数据
45.                 console.log("child size = ",child.length);          //可以使用list 的length属性获取 list的长度
46.             }
48.             background:Rectangle{
49.                 anchors.fill: parent;
50.                 color:"yellow"
51.                 border.width:1
52.                 border.color: "red";
53.             }
54.         }
56.         //栈布局，只显示currentIndex对应的Item
57.         StackLayout{
58.             //需要在StackLayout中做布局，控制StackLayout的区域
59.             anchors.top: idTabBar.bottom
60.             anchors.bottom: parent.bottom
61.             width: parent.width
63.             currentIndex: idTabBar.currentIndex
65.             //插入于TabBar 中TabButton 对应的内容区域
66.             Text{
67.                 text: "I am Tab1 "
68.                 verticalAlignment: Text.AlignVCenter
69.                 horizontalAlignment: Text.AlignHCenter;
70.             }
71.             Text{
73.                 text: "I am Tab2 "
74.                 verticalAlignment: Text.AlignVCenter
75.                 horizontalAlignment: Text.AlignHCenter;
76.             }
77.             Text{
79.                 text: "I am Tab3 "
80.                 verticalAlignment: Text.AlignVCenter
81.                 horizontalAlignment: Text.AlignHCenter;
82.             }
84.         }
85.     }
86. }

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。