如何制作QtQuick透明工具栏

Question

如何使内置Quick ToolBar透明，以便只显示按钮？

Answer 1

从QtQuick.Controls.Styles 1.3和Qt 5.2开始，您可以使用ToolBarStyle，即您可以编写类似这样的内容（显然可以使用您喜欢的任何填充）：

toolBar:ToolBar {

    style: ToolBarStyle {
        padding {
            left: 0
            right: 0
            top: 0
            bottom: 0
        }
        background: Rectangle {
            color: "transparent"
        }
    }

    RowLayout {
        anchors.fill: parent
        ToolButton {
            text: "Button 1"
        }
        ToolButton {
            text: "Button 2"
            style: ButtonStyle {
                background: Rectangle {

                    border.width: control.activeFocus ? 4 : 1
                    border.color: "#888"
                    radius: 4
                    gradient: Gradient {
                        GradientStop { position: 0 ; color: control.pressed ? "#eee" : "#fff" }
                        GradientStop { position: 1 ; color: control.pressed ? "#fff" : "#aaa" }
                    }
                }

                label: Text {
                    anchors.fill: parent
                    minimumPixelSize : 8
                    fontSizeMode: Text.HorizontalFit
                    font.pixelSize: 15
                    text: "open"
                    color: "red"
                    font.bold: true
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }
        ToolButton {
            text: "Button 3"
        }
        Item { Layout.fillWidth: true }
        CheckBox {
            text: "Enabled"
            checked: true
            Layout.alignment: Qt.AlignRight
        }
    }
}

Answer 2

你没有义务使用ToolBar，它可以是任何视觉项目，例如在这里我使用半透明的蓝色矩形作为工具栏：

ApplicationWindow {
    width: 400
    height: 300
    visible: true
    toolBar: Rectangle {
        color: Qt.rgba(0,0,255,0.5)
        width: parent.width
        height: 30
        Row {
            ToolButton {
                text: "Button1"
            }
            ToolButton {
                text: "Button2"
            }
        }
    } 
}

或者，您可以使用Row：

toolBar: Row {   
}