qml 导航栏TabBar 工具栏ToolBar_qml tabbar

导航栏 TabBar

• 提供基于选项卡的导航模型，允许用户在不同的视图或子任务之间切换。用TabButton控件填充，可以理解为button按钮控件。一般会与布局或容器控件一起使用
• 属性
  contentHeight : 保存内容的高度。它用于计算导航栏的总隐式高度
  contentWidth : 保存内容的宽度。它用于计算导航栏的总隐式宽度
  position : 保存导航栏的位置
• 附加属性
  TabBar.index：[只读]，保存TabBar中每个导航栏按钮的索引
  TabBar.position：[只读]，保留导航栏的位置
  TabBar.tabBar：[只读]，包含管理此选项卡按钮的选项卡栏

与布局管理器使用

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color:"lightgray"

    TabBar {    //点击相应的按钮实现切换
        id: bar
        width: parent.width
        TabButton {
            text: qsTr("First")
        }
        TabButton {
            text: qsTr("Second")
        }
        TabButton {
            text: qsTr("Third")
        }
    }

    StackLayout {   //栈布局管理器
        anchors.centerIn: parent
        width: parent.width
        currentIndex: bar.currentIndex  //当前视图的索引
        Item {
            Text {
                anchors.centerIn: parent
                text: qsTr("First")
            }
        }
        Item {
            Text {
                anchors.centerIn: parent
                text: qsTr("Second")
            }
        }
        Item {
            Text {
                anchors.centerIn: parent
                text: qsTr("Third")
            }
        }
    }
}
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

与容器控件 SwipeView 结合使用

• 滑动SwipeView时，当前索引currentIndex改变，使得滑动页面可以和标题栏的选择一致
  

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    SwipeView {
            id: view
            currentIndex: 0
            anchors.fill: parent
            orientation: Qt.Horizontal
            interactive: true

            Rectangle {
                id: firstPage
                color: "purple"
                Text {
                    text: qsTr("First")
                    anchors.centerIn: parent
                    font.pixelSize: 25
                }
            }
            Rectangle {
                id: secondPage
                color: "blue"
                Text {
                    text: qsTr("Second")
                    anchors.centerIn: parent
                    font.pixelSize: 25
                }
            }
            Rectangle {
                id: thirdPage
                color: "green"
                Text {
                    text: qsTr("Third")
                    anchors.centerIn: parent
                    font.pixelSize: 25
                }
            }
        }

    header: TabBar { //窗口标题 是 ApplicationWindow 的属性
        id: headertabBar;
        currentIndex:view.currentIndex
        TabButton {
            text: qsTr("header one");
        }
        TabButton {
            text: qsTr("header two")
        }
        TabButton {
            text: qsTr("header three")
        }
    }
}
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

工具栏 ToolBar

• 用于程序的上下文控制，例如导航按钮和搜索按钮
• 属性只有一个
  position：保存工具栏的位置

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("ToolBar")
    color: "lightgray"

    header: ToolBar {   //窗口标题栏设置ToolBar
        RowLayout {
            anchors.fill: parent
            ToolButton {    //此按钮是关联上下文
                text: qsTr("‹") //回退按钮
                onClicked: stack.pop()
            }
            Label {
                text: "Two" //标题名
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                Layout.fillWidth: true
            }
            ToolButton {
                id: fileButton;
                text: qsTr("⋮") //菜单隐藏按钮
                onClicked: menu.open()
            }
        }
    }
    Menu {
        id: menu
        x: fileButton.x;
        y: fileButton.y;
        Action { text: "Cut" }
        Action { text: "Copy" }
        Action { text: "Paste" }
    }

    StackView {
        id: stack
        anchors.fill: parent
    }
}
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