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

Question

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

Answer 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"
                }
            }
        }
    }
}