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

时间:2015-08-14 07:17:03

标签: qt qt4 qml qt5

有没有办法使用qml在基于Qt的应用程序中添加几组工具栏?例如,有一个名为StandToolBar的工具栏,其中包含newToolButtonopenToolButtonsaveToolButtonsaveAsToolButtonsaveAllToolButton。还有另一个名为EditToolBar的工具栏,其中包含copyToolButton,'cutToolButton',pasteToolButtonundoToolButtonredoToolButton

1 个答案:

答案 0 :(得分: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并为width分配了Toolbar

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

            }
        }
    }
}