qml组件学习-TabBar

TabBar（标签栏）一般结合StackLayout布局进行使用。

演示代码：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    TabBar {
         id: bar
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
         Material.accent: "black"  //点击之后的颜色

         TabButton {
//             Material.accent: "white"
             Material.foreground: "blue" //未点击之前的颜色
             text: qsTr("办理窗口")
//             font.weight: Font.Bold
             font.pointSize: 12
             font.family: "Microsoft YaHei"
         }

         TabButton {
//             Material.accent: "white"
             Material.foreground: "red"
             text: qsTr("消息记录")
//             font.weight: Font.Bold
             font.pointSize: 12
             font.family: "Microsoft YaHei"
         }

         TabButton {
//             Material.accent: "white"
             Material.foreground: "red"
             text: qsTr("电话记录")
//             font.weight: Font.Bold
             font.pointSize: 12
             font.family: "Microsoft YaHei"
         }
    }
    StackLayout{
        id: layout
        anchors.top:bar.bottom
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        currentIndex: bar.currentIndex  //跟随菜单选项展示相应的子项
        Rectangle{
            id: rect1
            width: 100
            height: 100
            color: "red"
        }
        Rectangle{
            id: rect2
            width: 100
            height: 100
            color: "blue"
        }
        Rectangle{
            id: rect3
            width: 100
            height: 100
            visible: true
            color: "black"
        }
    }

}

效果如下：