Qt Quick中的TabBar提供了一个基于选项卡的导航模型。TabBar由TabButton控件填充，并且可以与任何提供currentIndex属性的布局或容器控件一起使用，例如StackLayout或SwipeView。

import QtQuick
import QtQuick.Controls
import QtQuick.LayoutsWindow {id: winwidth: 640height: 480visible: truetitle: qsTr("Tab Page")ListModel {id: pageModelListElement{pageName : "Home"pageColor : "steelblue"}ListElement{pageName : "FirstPage"pageColor : "tomato"}ListElement{pageName : "SecondPage"pageColor : "slateblue"}}TabBar {id: tabBarwidth: parent.widthheight: 50Repeater {model: pageModelTabButton {text:  pageNameheight: parent.heightbackground: Rectangle {implicitHeight: parent.heightcolor: pageColor}}}}StackLayout {anchors.top: tabBar.bottomheight: parent.heightwidth: parent.widthcurrentIndex: tabBar.currentIndexRepeater {model: pageModelRectangle {id: homeTabwidth: parent.widthheight: parent.heightcolor: pageColorText {id: pageTexttext: pageNameanchors.centerIn: parent}}}}