当前位置：首页 > news >正文

QML_TabBar和ToolBar

news 2025/6/6 21:14:18

QML_TabBar和ToolBar

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

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

Window {id: rootvisible: truewidth: 640height: 480title: qsTr("Menu")color: "lightgray"TabBar {id: barwidth: parent.widthTabButton {text: qsTr("First")}TabButton {text: qsTr("Second")}TabButton {text: qsTr("Third")}}StackLayout {anchors.centerIn: parentwidth: parent.widthcurrentIndex: bar.currentIndexItem {Text {anchors.centerIn: parenttext: qsTr("First")}}Item {Text {anchors.centerIn: parenttext: qsTr("Second")}}Item {Text {anchors.centerIn: parenttext: qsTr("Third")}}}
}

在这里插入图片描述

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

Window {id: rootvisible: truewidth: 640height: 480title: qsTr("Menu")color: "lightgray"SwipeView {id: viewcurrentIndex: headertabBar.currentIndexanchors.fill: parentorientation: Qt.Horizontalinteractive: trueRectangle {id: firstPagecolor: "purple"Text {text: qsTr("First")anchors.centerIn: parentfont.pixelSize: 25}}Rectangle {id: secondPagecolor: "blue"Text {text: qsTr("Second")anchors.centerIn: parentfont.pixelSize: 25}}Rectangle {id: thirdPagecolor: "green"Text {text: qsTr("Third")anchors.centerIn: parentfont.pixelSize: 25}}}TabBar {id: headertabBarwidth: parent.widthcurrentIndex: view.currentIndexTabButton {text: qsTr("header one")}TabButton {text: qsTr("header two")}TabButton {text: qsTr("header three")}}
}

在这里插入图片描述

工具栏 ToolBar
ToolBar主要用于应用程序的上下文控制，就像导航按钮和搜索按钮那样。我们可以打开某一个电脑软件，一般都会有菜单栏和工具栏的。简单理解的也是可以作为窗口标题的。它的属性只有一个就是position——保存工具栏的位置.
看一个官方例程，在窗口标题栏设置ToolBar，同样，ToolBar是用ToolButton来进行填充选项的，因为ToolButton是关联上下文的，所以它的一般用法就是设置一个回退按钮"<“，然后还可以设置一个菜单隐藏按钮"⋮”，中间的label可以理解为标题名称。
点击回退按钮，可以用之前讲的导航模型SwipeView或者StackView，来进行一个页面的切换，实现上下文的关联。大家可以自行补充StackView的页面进栈出栈。Menu的设置也很简单了，这里就不讲解了。

Window {id: rootvisible: truewidth: 640height: 480title: qsTr("Menu")color: "lightgray"ToolBar {width: parent.widthRowLayout {anchors.fill: parentToolButton {text: qsTr("‹")onClicked: stack.pop()}Label {text: "Two"horizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenterLayout.fillWidth: true}ToolButton {id: fileButtontext: qsTr("⋮")onClicked: menu.open()}}}Menu {id: menux: fileButton.xy: fileButton.yAction {text: "Cut"}Action {text: "Copy"}Action {text: "Paste"}}StackView {id: stackanchors.fill: parent}
}