ToolBar主要用于應用程序的上下文控制，就像導航按鈕和搜索按鈕那樣。ToolBar就像窗口程序的header或footer那樣。

ToolBar不提供自己的布局，不過需要開發者設置內容，如創建一個RowLayout。但設置了一個item在ToolBar上時，ToolBar會自己適應這個item的大小。

下面是官方的截圖：

代碼如下：

ApplicationWindow {visible:trueheader: ToolBar {RowLayout {anchors.fill: parentToolButton {text: qsTr("?")onClicked: stack.pop()}Label {text: "Title"elide: Label.ElideRighthorizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenterLayout.fillWidth: true}ToolButton {text: qsTr("?")onClicked: menu.open()}}}StackView {id: stackanchors.fill: parent}}

這里提供下本人的例子，如下：

這里主要的代碼如下：

header: ToolBar{background: Rectangle {color: "green"}RowLayout {spacing: 20anchors.fill: parentToolButton{contentItem: Image{fillMode: Image.PadhorizontalAlignment: Image.AlignHCenterverticalAlignment: Image.AlignVCentersource: stackView.depth > 1 ? "images/back.png" : "images/drawer.png"}onClicked: {if(stackView.depth > 1){stackView.pop()listView.currentIndex = -1}else{drawer.open()}}}}}

通過background:Rectangle去設置背景。

在ToolBar內部添加一個RowLayout。內部添加一個ToolButton，當stackView.depth > 1的時候，圖標變成這樣：

當回到主頁后：

其中statckview和frawer代碼如下：

Drawer {id: drawerwidth: Math.min(window.width, window.height) / 3height: window.heightdragMargin: stackView.depth > 1 ? 0 : undefinedListView {id: listViewfocus: truecurrentIndex: -1anchors.fill: parentdelegate: ItemDelegate {width: parent.widthtext: model.titlehighlighted: ListView.isCurrentItemonClicked: {listView.currentIndex = indexstackView.push(model.source)drawer.close()}}model: ListModel {ListElement {title: "XXXXXX"source: "qrc:/page/XXXXXX.qml"}ListElement {title: "XXXXXX"}ListElement {title: "XXXXXX"}ListElement {title: "XXXXXX"}ListElement {title: "XXXXXX"}ListElement {title: "XXXXXX"}ListElement {title: "XXXXXX"}ListElement {title: "XXXXXX"}ListElement {title: "XXXXXX"}}}}

其中是這樣的效果：

總結

以上是生活随笔為你收集整理的Qt文档阅读笔记-ToolBar QML Type的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。