Qt文档阅读笔记-ToolBar QML Type

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相关推荐

Qt文档阅读笔记-GridLayout QML Type解析与实例
目录基本概念代码与实例基本概念如果QGridLaout大小被调整,所有item的布局都将会重新排列.和widget的QGridLayout一样.如果想要一行或一列的布局可以使用RowLayou ...
Qt文档阅读笔记-FileDialog QML Type官方解析与实例
目录官方解析博主例子官方解析 FileDialog是基于文件的选择器,可以选择文件或文件夹,创建文件,这个Dialog初始化是不可见的,得需要设置他为visible或调用open()即可. 下面 ...
Qt文档阅读笔记-Label QML Type官方解析及实例
目录官方解析博主例子官方解析 Label扩展了父类Text中的styling和font.Label同样是有可视化的background项. Label {text: "Label&qu ...
Qt文档阅读笔记-TextEdit QML Type官方解析及实例
目录官方解析博主栗子官方解析 TextEdit展示了一个可编辑的一块,是有格式的文本. 他同样能展示普通文本和富文本: TextEdit {width: 240text: "<b ...
Qt文档阅读笔记-Text QML Type官方解析及实例
目录官方解析博主例子官方解析 Text能够展示纯文本和富文本.举个例子,红色文本以及指定的字体和大小 Text {text: "Hello World!"font.famil ...
Qt文档阅读笔记-Button QML Type官方解析及实例
目录官方解析博主栗子官方解析按钮展示了一个按钮控件,这个控件可以被用户所按下,按钮是通常被用于执行一个操作,或者解决一个问题.buttons有如下几个典栗,如Ok,Apply,Cancel,C ...
Qt文档阅读笔记-Timer QML Type 官方解析与实例
目录官方解析博主例子官方解析 Timer能够触发一个动作,或者在给定时间重复这个动作: 下面给出显示当前时间的代码,500毫秒刷新异常,这里是通过JS对象来获取当前时间! import QtQu ...
Qt文档阅读笔记-Image QML官方解析与实例
目录官方解析博主例子官方解析 Image Image用于展示图片. 使用source属性可以使用URL指定一张图片. 只要是Qt能打开的图片都支持,如果要展示动态图,要使用:BnimatedSp ...
Qt文档阅读笔记-共享库的创建与调用
使用共享库的符号这个符号可以作用在变量.类.函数中,并且这些都可以被调用端使用. 在编译共享库中,需要使用export符号.在使用端调用的时候使用import符号. 这里是本人从文档中记录的笔记,大 ...

Qt文档阅读笔记-ToolBar QML Type

Qt文档阅读笔记-ToolBar QML Type相关推荐

最新文章

热门文章