如何使用 qml 添加几组工具栏？答案

【问题标题】：How to add several groups of toolbar using qml?如何使用 qml 添加几组工具栏？
【发布时间】：2015-11-07 08:59:26
【问题描述】：

有没有办法使用 qml 在基于 Qt 的应用程序中添加几组工具栏？例如，有一个名为StandToolBar 的工具栏，其中包含newToolButton、openToolButton、saveToolButton、saveAsToolButton 和saveAllToolButton。还有一个名为EditToolBar的工具栏，其中包含copyToolButton、'cutToolButton'、pasteToolButton、undoToolButton和redoToolButton。

【问题讨论】：

我认为您不能拥有多个ToolBar。您可以实现自己的，也可以在ToolBar 中放置多个容器/布局以获得所需的结果。也就是说，ApplicationWindow 认为工具栏是唯一的Item，就像documentation 中所述。
@BaCaRoZzo 使用 C++ 代码时，您可以像以下代码一样轻松添加更多 ToolBar。所以我想知道如何使用 qml 来代替。 QToolBar *standToolBar = addToolBar(tr("&File")); standToolBar->addAction(openAction); QToolBar *editToolBar = addToolBar(tr("&Edit")); editToolBar->addAction(copyAction);

标签： qt qt4 qml qt5

【解决方案1】：

你可以这样做：

import QtQuick 2.2
import QtQuick.Controls 1.2
Item {
    width:800
    height: 480
    ToolBar {
        id:standToolBar
        Rectangle{
            color:"lightgrey"
            anchors.fill: parent
        }

        Row {
            anchors.fill: parent
            ToolButton {
                id:newButton
                text: "new"
                // iconSource: "new.png"
            }
            ToolButton {
                id:openButton
                text: "open"
                // iconSource: "open.png"
            }
            ToolButton {
                id: saveButton
                text: "save"
                // iconSource: "save.png"
            }
            ToolButton {
                id: saveAsButton
                text: "save as"
                // iconSource: "save-as.png"
            }
            ToolButton {
                id: saveAllButton
                text: "save all"
                // iconSource: "save-all.png"
            }

        }
    }
    ToolBar {
        id:editToolBar
        anchors.top: standToolBar.bottom
        Rectangle{
            color:"lightgrey"
            anchors.fill: parent
        }

        Row {
            anchors.fill: parent
            ToolButton {
                id:copy
                text: "copy"
                // iconSource: "copy.png"
            }
            ToolButton {
                id:cut
                text: "cut"
                // iconSource: "cut.png"
            }
            ToolButton {
                id:paste
                text: "paste"
                // iconSource: "paste.png"
            }
            ToolButton {
                id:undo
                text: "undo"
                // iconSource: "undo.png"
            }
            ToolButton {
                id:redo
                text: "redo"
                // iconSource: "redo.png"
            }

        }
    }
}

编辑

为了让他们进入row，我删除了所有anchors，并为Toolbar分配了width：

import QtQuick 2.2
import QtQuick.Controls 1.2
Item {
    width:800
    height: 480
    Row{
        spacing: 5
        ToolBar {
            id:standToolBar
            width:400
            Rectangle{
                color:"lightgrey"
                anchors.fill: parent
            }

            Row {
                //  anchors.fill: parent
                ToolButton {
                    id:newButton
                    text: "new"
                    // iconSource: "new.png"
                }
                ToolButton {
                    id:openButton
                    text: "open"
                    // iconSource: "open.png"
                }
                ToolButton {
                    id: saveButton
                    text: "save"
                    // iconSource: "save.png"
                }
                ToolButton {
                    id: saveAsButton
                    text: "save as"
                    // iconSource: "save-as.png"
                }
                ToolButton {
                    id: saveAllButton
                    text: "save all"
                    // iconSource: "save-all.png"
                }

            }
        }
        ToolBar {
            id:editToolBar
            width: 400
            Rectangle{
                color:"lightgrey"
                anchors.fill: parent
            }

            Row {
                //  anchors.fill: parent
                ToolButton {
                    id:copy
                    text: "copy"
                    // iconSource: "copy.png"
                }
                ToolButton {
                    id:cut
                    text: "cut"
                    // iconSource: "cut.png"
                }
                ToolButton {
                    id:paste
                    text: "paste"
                    // iconSource: "paste.png"
                }
                ToolButton {
                    id:undo
                    text: "undo"
                    // iconSource: "undo.png"
                }
                ToolButton {
                    id:redo
                    text: "redo"
                    // iconSource: "redo.png"
                }

            }
        }
    }
}

【讨论】：

为什么不能将两个工具栏都放入Row 工作？
我不知道，是的，很奇怪，我去看看Toolbar的源代码，你可以使用anchors作为解决方法
大声笑。这是Item...这里太热了。我在说蠢话。
@Mitch 上面的答案真的很有效，standToolBar 在editToolBar 的顶部。但是，如果您想将editToolBar 与anchors.left: standToolBar.right 放在standToolBar 的右侧，则它不起作用，因为standToolBar 已完全填充父项。我们可能需要一个更好的解决方案，以便将两个工具栏都放在 Row 中。
放了一个新代码，行问题是工具栏有窗口的宽度，要解决它你应该给它分配一个宽度，就像我编辑的代码一样:)