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

ToolBar不提供自己的布局，不過需要開發(fā)者設(shè)置內(nèi)容，如創(chuàng)建一個(gè)RowLayout。但設(shè)置了一個(gè)item在ToolBar上時(shí)，ToolBar會(huì)自己適應(yīng)這個(gè)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去設(shè)置背景。

在ToolBar內(nèi)部添加一個(gè)RowLayout。內(nèi)部添加一個(gè)ToolButton，當(dāng)stackView.depth > 1的時(shí)候，圖標(biāo)變成這樣：

當(dāng)回到主頁后：

其中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"}}}}

其中是這樣的效果：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。