qml组件学习-TabBar_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"
        }
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

效果如下：