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 或 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实例代码运行结果如下：