树莓派Qt系列教程27：TabBar和ToolBar

2020-8-28 13:24| 发布者: dasi| 查看: 9647| 评论: 0|原作者: dasi

摘要: 前言这一节继续为大家讲解QML中一些比较有意思的控件。这一节我们要说的控件是导航栏TabBar和工具栏ToolBar。导航栏 TabBarTabBar提供基于选项卡的导航模型，它允许用户在不同的视图或子任务之间切换。TabBar用TabBu ...

前言

这一节继续为大家讲解QML中一些比较有意思的控件。这一节我们要说的控件是导航栏TabBar和工具栏ToolBar。

导航栏 TabBar

TabBar提供基于选项卡的导航模型，它允许用户在不同的视图或子任务之间切换。TabBar用TabButton控件填充，TabButton可以理解为button按钮控件。TabBar一般会与布局或容器控件一起使用，比如布局管理器或者是我们之前讲过的导航模型SwipeView。

属性

contentHeight : 保存内容的高度。它用于计算导航栏的总隐式高度
contentWidth : 保存内容的宽度。它用于计算导航栏的总隐式宽度
position : 保存导航栏的位置

附加属性

TabBar.index：[只读]，保存TabBar中每个导航栏按钮的索引
TabBar.position：[只读]，保留导航栏的位置
TabBar.tabBar：[只读]，包含管理此选项卡按钮的选项卡栏

导入控件库，我们还是从两个例程中了解一下TabBar的用法，首先是和布局管理器的结合使用。这个实现效果和之前的SwipeView控件实现的效果类似。

01TabBar {
02    id: bar
03    width: parent.width
04    TabButton {
05        text: qsTr("First")
06    }
07    TabButton {
08        text: qsTr("Second")
09    }
10    TabButton {
11        text: qsTr("Third")
12    }
13}
14 
15StackLayout {
16    anchors.centerIn: parent
17    width: parent.width
18    currentIndex: bar.currentIndex
19    Item {
20        Text {
21            anchors.centerIn: parent
22            text: qsTr("First")
23        }
24    }
25    Item {
26        Text {
27            anchors.centerIn: parent
28            text: qsTr("Second")
29        }
30    }
31    Item {
32        Text {
33            anchors.centerIn: parent
34            text: qsTr("Third")
35        }
36    }
37}

TabBar用TabButton填充，然后在设置一个栈布局管理器，内容也很简单，就是对应着导航栏的名称，设置每个视图上的内容。currentIndex就是当前视图的索引。SwipeView在进行导航时用的是滑动的方法，而TabBar本质是还是一个一个的按钮组成的，点击事件使currentIndex发生变化，而StackLayout提供了一个一次只能显示一个项目堆栈，currentIndex的变化导致当前项目的索引随之改变。

第二个应用是和SwipeView的结合，之前在讲SwipeView这一节的时候，我们对于窗口标题项的设置是Page的页眉页尾，现在我们学习了TabBar控件，所以我们来设置一下窗口标题项header。header是ApplicationWindow的属性，所以我们要把Window窗口元素换成ApplicationWindow。

01ApplicationWindow {
02    visible: true
03    width: 640
04    height: 480
05    title: qsTr("Hello World")
06 
07    SwipeView {
08            id: view
09            currentIndex: 0
10            anchors.fill: parent
11            orientation: Qt.Horizontal
12            interactive: true
13 
14            Rectangle {
15                id: firstPage
16                color: "purple"
17                Text {
18                    text: qsTr("First")
19                    anchors.centerIn: parent
20                    font.pixelSize: 25
21                }
22            }
23            Rectangle {
24                id: secondPage
25                color: "blue"
26                Text {
27                    text: qsTr("Second")
28                    anchors.centerIn: parent
29                    font.pixelSize: 25
30                }
31            }
32            Rectangle {
33                id: thirdPage
34                color: "green"
35                Text {
36                    text: qsTr("Third")
37                    anchors.centerIn: parent
38                    font.pixelSize: 25
39                }
40            }
41        }
42 
43    header: TabBar {
44        id: headertabBar;
45        currentIndex:view.currentIndex
46        TabButton {
47            text: qsTr("header one");
48        }
49        TabButton {
50            text: qsTr("header two")
51        }
52        TabButton {
53            text: qsTr("header three")
54        }
55    }
56}

关于SwipeView的代码就是SwipeView章节中的第一个例程内容，大家不理解的可以参考SwipeView这一篇的内容。设置窗口标题栏，用TabBar为其设置导航选项卡，TabButton填充选项卡的内容。当我们滑动SwipeView时，当前索引currentIndex改变，使得滑动页面可以和标题栏的选择一致。

工具栏 ToolBar

ToolBar主要用于应用程序的上下文控制，就像导航按钮和搜索按钮那样。我们可以打开某一个电脑软件，一般都会有菜单栏和工具栏的。简单理解的也是可以作为窗口标题的。它的属性只有一个就是position——保存工具栏的位置。

01ApplicationWindow {
02    visible: true
03    width: 640
04    height: 480
05    title: qsTr("ToolBar")
06    color: "lightgray"
07 
08    header: ToolBar {
09        RowLayout {
10            anchors.fill: parent
11            ToolButton {
12                text: qsTr("‹")
13                onClicked: stack.pop()
14            }
15            Label {
16                text: "Two"
17                horizontalAlignment: Qt.AlignHCenter
18                verticalAlignment: Qt.AlignVCenter
19                Layout.fillWidth: true
20            }
21            ToolButton {
22                id: fileButton;
23                text: qsTr("⋮")
24                onClicked: menu.open()
25            }
26        }
27    }
28    Menu {
29        id: menu
30        x: fileButton.x;
31        y: fileButton.y;
32        Action { text: "Cut" }
33        Action { text: "Copy" }
34        Action { text: "Paste" }
35    }
36 
37    StackView {
38        id: stack
39        anchors.fill: parent
40    }
41}

看一个官方例程，在窗口标题栏设置ToolBar，同样，ToolBar是用ToolButton来进行填充选项的，因为ToolButton是关联上下文的，所以它的一般用法就是设置一个回退按钮"<"，然后还可以设置一个菜单隐藏按钮"⋮"，中间的label可以理解为标题名称。

点击回退按钮，可以用之前讲的导航模型SwipeView或者StackView，来进行一个页面的切换，实现上下文的关联。大家可以自行补充StackView的页面进栈出栈。Menu的设置也很简单了，这里就不讲解了。

总结

这两个控件的用法大家掌握了吗？可以继续编写自己的自定义控件哦！我们下节再会！

275 顶一下

刚表态过的朋友 (275 人)

收藏邀请

上一篇：树莓派Qt系列教程26：Menu、Popup和Drawer下一篇：树莓派Qt系列教程28：ToolSeparator、ToolTip和Tumbler

树莓派Qt系列教程27：TabBar和ToolBar

前言

导航栏 TabBar

属性

附加属性

工具栏 ToolBar

总结

刚表态过的朋友 (275 人)

相关阅读